Develop Reference

Full Calendar drag and drop event call back

When i try to add external event to it i require date and time from the calendar how can i achieve that here is my code which i have worked over.
document.addEventListener('DOMContentLoaded', function () {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable
//// the individual way to do it
var containerEl = document.getElementById('external-events-list');
var eventEls = Array.prototype.slice.call(
containerEl.querySelectorAll('.fc-event')
);
eventEls.forEach(function(eventEl) {
new Draggable(eventEl, {
eventData: {
title: eventEl.innerText.trim(),
}, // this allows things to be dropped onto the calendar
drop: function (arg) {
// is the "remove after drop" checkbox checked?
alert(arg);
}, // this allows things to be dropped onto the calendar
eventReceive: function (arg) {
// is the "remove after drop" checkbox checked?
alert(arg);
},
eventDrop: function (event, delta, revertFunc) {
//inner column movement drop so get start and call the ajax function......
console.log(event.start.format());
console.log(event.id);
var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
var end = event.end || event.start.clone().add(defaultDuration);
console.log('end is ' + end.format());
//alert(event.title + " was dropped on " + event.start.format());
}
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function (arg) {
// is the "remove after drop" checkbox checked?
if (document.getElementById('drop-remove').checked) {
// if so, remove the element from the "Draggable Events" list
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
}
},
eventDrop: function (info) {
alert(info.event.title + " was dropped on " + info.event.start.toISOString());
if (!confirm("Are you sure about this change?")) {
info.revert();
}
},
//eventRender: function (info) {
// console.log(info.event.extendedProps);
// // {description: "Lecture", department: "BioChemistry"}
//}
});
calendar.render();
});
i am trying to add event callback function in the new Draggable but to no use as event are not fired from it when i drag within the calendar then it fires back from new Calendar, so i require that after dragging event externally in the calendar i need to get date and time from it.

Full Calendar Event background change

I am using full Calendar latest version and displayed events as hain data successfully. Now when I click on event I am displaying a pop-up containing the event information.
There is a button on pop-up using that I am changing value of that event in database and doing this through AJAX.
Now I want to change background color of that event on success of pop-up submit using AJAX.
How can I achieve that ?
This is code for full calendar
/* Full Calendar */
jQuery(document).ready(function() {
var currenturl=window.location.search;
if(currenturl=='?page=budget_calendar'){
var ajax_url=calendar_ajax_url.cal_lib;
}
jQuery('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
buttonText: {today: 'Today', month: 'Month', agendaWeek: 'Week', agendaDay: 'Day',listWeek:'list'},
lang: 'us',
refetch: false,
firstDay: 1,
eventLimit: 2, // allow "more" link when too many events
disableDragging: true,
eventRender: function(event, element) {
element.find('.fc-title').hide();
element.find('.fc-time').hide();
element.find('.fc-title').after(
jQuery("<div><i class='fa fa-money'></i>"+ event.type +" : <br>" + event.title + "</div>"+"<div></div>"+"<div>Amount :" + event.amount + "</div>")
);
element.css('border-color','#0040ff');
element.css('background-color',event.color);
element.click(function () {
var event_id=event.id;
var event_type=event.type;
jQuery.ajax({
type:'POST',
url:ajax_url+'/assets/lib/lib_calendar_ajax.php',
data:{event_type:event_type,event_id:event_id,action:'get_event_details'},
success:function(response){
var eventdata=jQuery.parseJSON(response);
if(event.type=='Expense'){
jQuery('#expenseModal').modal('show');
}
}
})
});
},
events:ajax_url+'/assets/lib/lib_upcoming_calendar.php',
});
});
And on popup button click
`$(document).on('click','#button_click',function(){
var orderid=$(this).data('eventid');
$.ajax({
type:'POST',
url:'ajax_responce.php',
data: {'orderid':orderid,action:'change_status'},
success:function(response){
if(response=='done'){
/* here i want to change background color of event which i have clicked */
}
}
});
});

I just resolved this issue.I just did by using :-
/* In calendar */
/* In calendar */
var temp='';
eventClick: function(event, element) {
var temp= $(this);
}
and
/* And jquery on button click */
$(document).on('click','#save',function(){
temp.css('background-color','red');
});

It is better to use refetch events in success of code like this
var calendar=$('#calendar').fullCalendar();
calendar.fullCalendar('refetchEvents');

How to change the date in agendaView of FullCalendar javascript plugin

I am using this great javascript FullCalendar plugin.
I have to display a month calendar, and when a day is selected, show the agendaView next to it like so:
In that example image, the user has clicked on July 1st, and I need the agendaView on the right to display for July 1st, but it always loads today's date.
Here is the code. You can see the commented code where I tried to set the visible range when the 'day' calendar (agendaView) is loaded, but that did not work. Currently at the end I'm trying to use the changeView function, but that also didn't work.
$(document).ready(function () {
// page is now ready, initialize the calendar...
var selectedDay = null;
var selected = moment();
$('#calendar').fullCalendar({
// options and callbacks here
aspectRatio: 1.5,
dayClick: function (date, jsEvent, view) {
// alert('Clicked on: ' + date.format());
// alert('Current view: ' + view.name);
// reset previously selected day's background color
if (selectedDay !== null) {
$(selectedDay).css('background-color', 'transparent')
};
// change the newly selected day's background color
$(this).css('background-color', '#A5DC86');
selectedDay = this;
// selected = this.fullCalendar.moment();
selected = this.date;
$('#day').fullCalendar({
// visibleRange: function(currentDate) {
// return {
// start: selected.date,
// end: selected.date.clone().add(1, 'days') // exclusive end
// };
// },
aspectRatio: 1.5,
defaultView: 'agendaDay',
header: {left: '', center: 'title', right: ''},
allDaySlot: false,
slotDuration: '00:60:00',
scrollTime: '00:00:00'
}),
$('#day').fullCalendar('changeView', 'agendaDay', selectedDay.date )
}
});
});

It turns out that changeView expects a formatted date, so:
$('#day').fullCalendar('changeView', 'agendaDay', date.format() )
is the solution.

why is full calendar jquery plugin not working as expected when I click next or previous?

I´m using the full calendar plugin, so I load my data for the current month, but when I click previous, then next then previous again; my previous events get duplicated.
For example, if I had an event with id=1 in november, and I´m in december and I go to november; then I see my event with id=1 duplicated.
Here is my json:
[{"id":2024,"title":"titulo0","start":"2014-12-23 19:22:17","end":"2014-12-23 19:22:17","description":"descripcion0"}]
Here is how I load my calendar:
function loadEventos() {
var current_url = '';
var new_url = '';
$('#calendar').fullCalendar({
events: '/pushCombos/calendarioAction!getEventosMes.action?mes=' + 1,
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
eventClick: function(calEvent, jsEvent, view) {
calEvent.title = "CLICKED!";
console.log(moment(calEvent.end).format("YYYY-MM-DD"));
editarEvento(calEvent);
console.log(moment(calEvent.end).format("YYYY-MM-DD"));
$('#calendar').fullCalendar('updateEvent', calEvent);
}
});
}
and here is the code of my buttons:
$('.fc-button-group').children().eq(1).click(function(){
var date = $("#calendar").fullCalendar('getDate');
var month_int = moment(date).format("MM");
var year_int = moment(date).format("YYYY");
var events = {
url: '/pushCombos/calendarioAction!getEventosMes.action?mes=1',
data: {
month: month_int,
year: year_int
}
};
$('#calendar').fullCalendar('removeEventSource', events);
$('#calendar').fullCalendar('addEventSource', events);
});
When I edit an event and reload it; it reloads fine, but if I use the next and previous buttons, the events get duplicated.
Why is this happening??
Thanks in advance!

Try changing your events option to this:
events: {
url: '/pushCombos/calendarioAction!getEventosMes.action',
type: 'GET',
data: {
mes: 1
},
cache: false,
error: function (jqXHR, textStatus, errorThrow) { //whatever you want }
}

It seems that this plugin automatically does the post when you press the previous button that why it was duplicating the events.
Another weird thing I found is that the first day of the month and the last day of the month it sends to the server are wrong.

Add script on Page load c#

I'm trying to add a script to the page but nothing happens, the calendar does not appear.
The objective is to render a calendar with a list of events, im trying to avoid webservices to get the list.
string CalendarScript = #"<script type=""text/javascript"">
jQuery(function ($) {
/* initialize the external events
-----------------------------------------------------------------*/
$('#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 date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
lang: ""pt"",
allDaySlot: false,
minTime: ""07:00:00"",
maxTime: ""23:59:59"",
defaultView: 'agendaWeek',
header: {
left: ' ',
center: ' ',
right: ' '
},
events: [ " + EventsList + #"
]
,
columnFormat: {
week: 'dddd',
},
editable: false,
droppable: false, // this allows things to be dropped onto the calendar !!!
selectable: false,
selectHelper: false
});
})
</script>";
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "InitCalendarEvents", CalendarScript, false);
where the EventList is like this
{ title: 'Some Event', start: new Date(y, m, d - 2, 16, 00), end: new Date(y, m, d - 2, 17, 00), allDay: false, color: 'blue !important', textColor: 'white !important' }

Two things. First, when you use register a script with the script manager, it should be just the javascript and not wrapped in a script tag. Second, you will most likely want the function to occur on the the add_load event.
This is a sample snippet:
this.Page.ClientScript.RegisterStartupScript(
this.GetType(),
"StartupScript",
"Sys.Application.add_load(function() { functioncall(); });",
true);
Note that the parameter for the javascript function is a javascript function and not an html script element. Also, not that the function is composed into Sys.Application.add_load
If you do those two things, the script should at least be executed. The question Sys.application.add_load vs document ready vs pageload is probably relevant to what you are trying to do.