I'm currently working on a school project that requires a scheduling calendar as it's core function. However, I downloaded a third party java script calendar from the net and edit the java script codes accordingly to my project requirements.
But as a noob in asp.net, I do not know how to save the javascript object into my SQL server. Is there a guide or a website where I can learn how to do it ? Below is a set of my java script, so how do I use JSON with this code?
$(document).ready(function () {
/* initialize the external events
-----------------------------------------------c ------------------*/
$('#external-events div.external-event2').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the external events
-----------------------------------------------c ------------------*/
$('#external-events div.external-event').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
// calendar.fullCalendar('unselect');
},
eventClick: function (calEvent, jsEvent, view) {
var title = prompt('Rename Event Title:');
calEvent.title = title;
// copiedEventObject.title = title;
alert('Altered Event : ' + calEvent.title);
// change the border color just for fun
$(this).css('border-color', 'red');
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// copiedEventObject.title = 'abc'; //<<<Change the title
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});
Convert your object JSON a String with JSON.stringify(object), and save it in the database, then when you access the data and recover this String, you send the client and to parse a JSON object with JSON.parse (string)
Related
Can anyone help me I'm a newbie.
I have set up external events that are droppable in my calender.
My calender holds my events when I'm clicking on next/previous. But when I reload my page the events are gone.
what It's wrong in my javascript?
<script>
$(document).ready(function () {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text())
// use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable(
{
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var eventObject = {
title: $.trim($(this).text())
// start: '2016-03-04'// use the element's text as the event title
};
$('#calendar').fullCalendar(
{
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
events: eventObject,
// this allows things to be dropped onto the calendar
drop: function (date, allDay) {
// retrieve the dropped element's stored Event Object
var eventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, eventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
$('#calendar').fullCalendar('refetchEvents');
// $('#calendar').fullCalendar( 'refetchexternal-events' ) ;
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});
</script>
I've created a monthly calendar using fullCalendar month view.
On my calendar, I've displayed only one event per day. This event is used to display user's status (available, not available, busy...)
Because I'll always have 1 event per day, I've set eventLimit to true to avoid multiple events and because this event is about the entire day, I've also set editable to false to prevent events' drag & drop .
Here is my code:
$('#calendar').fullCalendar({
editable: false, // Prevent event drag & drop
events: '/json/calendar', // Get all events using a json feed
selectable: true,
eventLimit: true, // Only 1 event per day
header: {
left: 'prev,next',
center: 'title',
right: 'today'
},
select: function(start, end) {
window.location.hash = '#oModal-calendar'; // Display some popup with a form
end.subtract(1, 'days');
$('#checkboxButton').data('start', start);
$('#checkboxButton').data('end', end);
$('#calendar').fullCalendar('unselect');
}
});
I want my user to be able to select days directly from the calendar so I've set selectable: true in the calendar's option. However, I've got many feedback that "it didn't worked".
After some investigation, I found that users often click on the event block instead of the day.
Because events are draggable by default, a click on an event doesn't trigger the select and because I've set editable to false it doesn't do anything anymore.
This combination leads my users to think that there is a bug.
I would like the fullCalendar select to work like there was no event on the calendar. How can I achieve this behavior ?
Edit: here is a jsfiddle based on full calendar example and my code
I finally found the solution.
FullCalendar event's click is bind to the css class fc-day-grid-event.
It's possible to simply ignore it with one css line pointer-events: none;.
.fc-day-grid-event {
pointer-events: none;
}
Here is the Jsfiddle updated.
One way to do this would be to allow the user to click on event's through the eventClick callback, but when they click on them trigger the "select" function through FullCalendar's API $('#calendar').fullCalendar('select', start, end).
I updated your jsfiddle example with the relevant code.
HTML
<div id="calendar"></div>
Javascript
$('#calendar').fullCalendar({
editable: false, // Prevent event drag & drop
defaultDate: '2015-02-12',
events: [{
title: 'All Day Event',
start: '2015-02-01'
}, {
title: 'Lunch',
start: '2015-02-12T12:00:00'
}],
selectable: true,
eventLimit: true, // Only 1 event per day
header: {
left: 'prev,next',
center: 'title',
right: 'today'
},
select: function (start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
eventClick: function(calEvent, jsEvent, view) {
var start = calEvent.start;
var end = calEvent.end;
$('#calendar').fullCalendar('select', start, end);
}
});
I have used full calendar external dragging events for a topic assigning interface.Used ajax for updating the topic details to mysql db but ajax is not working.I am not getting the values in my controller.Checked the other questions here but didn't find a solution.Can any one help?
<link href='assets/fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='assets/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='assets/fullcalendar/lib/moment.min.js'></script>
<script src='assets/js/jquery.js'></script>
<script src='assets/fullcalendar/lib/jquery-ui.custom.min.js'></script>
<script src='assets/fullcalendar/fullcalendar.min.js'> </script>
<script>
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
drop: function(date,event) {
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
$.ajax({
url: '/addSchedule',
dataType: 'json',
type: 'post',
data: {event: event},
success: function(response){
console.log('response');
}
});
}
});
});
</script>
I was experiencing the same issue as #AVM, by using the same procedure he is using.
this is the solution to this problem:
var event_title = event.title;
var event_date = event._start.format();
var event_backgroundColor = event.backgroundColor;
var event_borderColor = event.borderColor;
$.ajax({
url: '../php/add_event.php',
type: 'post',
data: {
title: event_title,
date: event_date,
backgroundColor: event_backgroundColor,
borderColor: event_borderColor
},
success: function(response){
alert(response);
},
error: function(){
alert("error");
}
});
Note the:
var event_date = event._start.format();
This solved my problem, I hope it will solve yours.
Thanks
Mat
I am using full calendar in that I need to handle both click and dblclick event on eventclick.
For that I did the following code.
Taking data from server and from json data :
function FormJosn(Data) {
var Json = [];
for (var i = 0; i < Data.length; i++) {
Json.push({
"id": Data[i].Appointment_ID,
"title": Data[i].F_Name + ' ' + Data[i].L_Name,
'start': Data[i].start,
'end': Data[i].End,
'allDay': false
});
}
Calander(Json);
}
and render full calender,
function Calander(Data) {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
editable: true,
droppable: true,
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
select: function (start, end, allDay) {
SetAppointmentBookingDateTime(start);
calendar.fullCalendar('unselect');
},
editable: false,
disableResizing:false,
events: Data,
eventRender: function (event, element)
{
element.bind('click', function (event, element) {
var doubleClickOpportunity = 200, // Adjust this to whatever feels right
$elem = $(event.target),
clicker = $elem.data('clicker'); // Holder for the doubleclick setTimeout
if (clicker) {
// If there's a setTimeout stored in clicker, then this is a double click
clearTimeout(clicker);
$elem.data('clicker', '');
$elem.trigger('doubleclick');
} else {
$elem.data('clicker', setTimeout(function () {
$elem.data('clicker', '');
$elem.trigger('singleclick');
}, doubleClickOpportunity));
}
});
element.bind('singleclick', function (event, element) {
// I'm a single click!
window.location = "http://" + window.location.host + "/Hospital/Treatment/AddTreatment/" + event.id;
});
element.bind('doubleclick', function () {
// I'm a double click!
$(".Modify-Appointment").modal("show");
});
}
});
}
I have bind click and dblclick eventRender which will working fine but I am not getting data of the event as it get it on eventClick function.
I need those data to proceed further.
In order to pass data to jQuery's callback, as per the bind documentation, you should use the following signature:
.bind( eventType [, eventData ], handler )
So you must pass an object to the callback, like this:
element.bind('singleclick', { event: event, element: element }, function () {
// I'm a single click!
window.location = "http://" + window.location.host + "/Hospital/Treatment/AddTreatment/" + event.id;
});
Also note that as of jQuery 1.7, .on() is the preferred method over .bind()
I have a problem of dragging and dropping external elements to a calendar (Fullcalendar) on a windows machine. All works fine on a linux, mac machine. But does not save to the database on a windows machine. What may be the problem??
jQuery(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------
*/
jQuery('#external-events div.external-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: jQuery.trim(jQuery(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
jQuery(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
jQuery(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
// page is now ready, initialize the calendar...
jQuery('#calendar').fullCalendar({
loading: function(bool) {
if (bool) jQuery('#loading').show();
else jQuery('#loading').hide();
},
events: "/roster/manage/ajax?part=shiftcalendar&nodeID="+placeid,
// put your options and callbacks here
header: {
left: 'prev,next today',
center: 'title',
right: 'prev,next today',
},
cache: false,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = jQuery(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = jQuery.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
jQuery('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// Call this function to store the date and time of this shift into a table
saveShift(originalEventObject,copiedEventObject);
},
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
if (!confirm("Are you sure you want to change dates?")) {
revertFunc();
}
else {
// Our edit function for this shift
updateShift(event);
}
},
eventClick: function(event,revertFunc) {
if(!confirm("Are you sure you want to delete this "+ event.title +" shift?")) {
revertFunc();
}
else {
// Delete shift
deleteShift(event);
}
}
/*eventMouseover: function(event, jsEvent, view) {
jQuery.getJSON('/roster/manage/ajax', {part: "shiftcalendarpeople", shiftID: event.id }, function(data) {
if(data != null) {
var layer = "<div id='events_"+event.id+"'>";
jQuery.each(data, function(k, v) {
layer += "<span>"+v.user+" as "+v.role+"</span>";
});
layer += "</div>";
jQuery(this).append(layer);
}
else {
var layer = "<div id='events_"+event.id+"'><span>No people rostered.</span></div>";
jQuery(this).append(layer);
}
});
},
eventMouseout: function(event, jsEvent, view) {
jQuery("#events_"+event.id+"").remove();
}*/
})
});
Usually when something works on every machine except windows (or vice-versa) it's because of path issues. I see that you use a unix path in a variable
events: "/roster/manage/ajax?part=shiftcalendar&nodeID="+placeid
Maybe try using the windows style path "\roster\manage\ajax?part=shiftcalendar&nodeID="+placeid
It's a rough guess. It's what jumps to my eyes at first glance.