dayClick and eventClick function not working - fullcalendar

I have inserted some new functions in my js but dayClick and eventClick don't work. The calendar is able to load properly though.
Any idea why the dayclick and eventclick in the following code is not working?
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: '',
right: 'agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
allDayDefault: false,
allDaySlot: false,
firstHour: 9,
defaultView: 'agendaWeek',
dayClick: function(date, allDay, jsEvent, view) {
calendar.fullCalendar('gotoDate', date);
},
eventClick: function(calEvent, jsEvent, view) {
window.location = "http://www.domain.com?start=" + calEvent.start;
},
select: function(start, end) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end
},
false // make the event "stick"
);
var startDateString = $.fullCalendar.formatDate(start, 'yyyy-MM-dd hh:mm');
var endDateString = $.fullCalendar.formatDate(end, 'yyyy-MM-dd hh:mm');
$.ajax({
type: 'POST',
url: '{url}ajaxpost/add',
data: {
startDate: startDateString,
endDate: endDateString,
eventTitle: title
},
dateType: 'json',
success: function (resp) {
calendar.fullCalendar('refetchEvents');
}
});
}
calendar.fullCalendar('unselect');
},
editable: true,
events: "{url}ajaxget/data",
});
});

You cannot use the "select" callback and the "dayClick" callback together as there is a conflict between the two. You can use datepicker to accomplish the gotoDate function to accomplish the same thing.
http://weblogs.asp.net/gunnarpeipman/archive/2010/02/02/linking-jqueryui-datepicker-and-fullcalendar.aspx
As for the eventClick Im not sure why it is not working, but it is easier to place the url in the database the call it in the events and just set it as the property "url: www.somesite.com/sdfjkiwe"
As a side note, It would probably wor better if you didn't use renderEvent to display your event. Try using the event function found here to use your ajax call within it.
http://arshaw.com/fullcalendar/docs/event_data/events_function/

Related

timezone on full calendar is changing the time

I am trying full calendar for the first time on an ASP.NET MVC page. for the timezone, I have tried using 'local', 'America/Chicago'( as well as America/New_York and America/Los_Angeles) and variations of UTC all to no avail. When it has timezone: 'local' every event will show 2 hours after the start of each event, so an event at 11am will say 1pm. UTC is worse it is 8 hours off then. How do I fix this??
Here is the code
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/fullcalendar.js"></script>
<script>
$(document).ready(function () {
$('#coverage').click(function () {
$('#Map').show();
});
$('#close').click(function () {
$('#Map').hide();
});
var events = [];
$.ajax({
type: "GET",
url: "/Home/GetEvents",
success: function (data) {
$.each(data, function (i, evt) {
events.push({
title: evt.Title,
start: evt.Start,
id: evt.ID
});
});
GenerateCalendar(events);
}
});
function GenerateCalendar(events) {
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar({
header: {
right: '',
center: '',
left: ''
},
theme: true,
timezone: 'local',
editable: false,
defaultDate: '#Convert.ToDateTime(ViewBag.EventDate).ToShortDateString() ',
allDaySlot: false,
selectable: true,
slotMinutes: 15,
events: events,
eventClick: function (calEvent) {
window.location = '/MonthlyEvents/Details/' + calEvent.id;
}
});
}
});
</script>

Jquery full calendar (style changes after page refresh)

This is my calendar initially after the event creation:
and this is after page refresh:
Can anyone help me understand how to keep the same style even after page refresh, specifically the vertical line in the middle? Sometimes the line increases as well.
The fullCalendar JS is as follows:
$('#calendar').fullCalendar({
locale: 'nl',
weekends: true, // false will hide Saturdays and Sundays
defaultView: 'agendaWeek',
allDaySlot: false,
slotLabelFormat: "HH:mm",
axisFormat: 'HH:mm',
timeFormat: 'HH:mm',
aspectRatio: 1,
editable: true,
eventStartEditable: true,
selectable: true,
selectHelper: true,
unselectAuto: false,
eventLimit: true,
dragScroll: true,
eventOverlap: false,
slotEventOverlap: false,
header: {
left: 'title',
center: '',
right: 'prev,next,today,agendaWeek,agendaDay'
},
views: {},
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
var title = "Available";
var eventInfo;
eventInfo = {
title: title,
start: event.start,
end: event.end,
id: event.id
};
updateEvent(eventInfo);
},
eventResize: function (event, dayDelta, minuteDelta, revertFunc) {
var title = "Available";
var eventInfo;
eventInfo = {
title: title,
start: event.start,
end: event.end,
id: event.id
};
updateEvent(eventInfo);
},
select: function (start, end) {
var title = "Available";
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
createEvent(eventData);
}
$('#calendar').fullCalendar('unselect');
},
eventSources: [{
events: function (start, end, timezone, callback) {
var employeeId = $("#employee-Id").val();
$.ajax({
url: '../' + employeeId + '/events',
dataType: 'json',
success: function (response) {
var events = $.parseJSON(response.data);
$('#calendar').fullCalendar('addEventSource', events);
callback(events);
}
});
}
}],
eventRender: function (event, element) {
//delete event on double click..Tanvir
element.one().bind('dblclick', function (e) {
/* e.preventDefault();
$(this).prop('disabled', true);
setTimeout(function () { $(this).prop('disabled', false); }, 500);*/
$("#startTime").html(moment(event.start).format('MMM Do YYYY, h:mm A'));
$("#endTime").html(moment(event.end).format('MMM Do YYYY,h:mm A'));
$("#eventContent").dialog({modal: true, title: event.title, width: 100});
$('.delete-event').bind('click', function (e) {
$('#calendar').fullCalendar('removeEvents', event._id);
deleteEvent(event.id);
$("#eventContent").hide();
});
$('.discard-delete').bind('click', function () {
$("#eventContent").hide();
});
});
},
});
});
No duplicate event is created in the database. What is happening a the event HTML is rendering twice after refresh. Specifically fc-time-grid-event under the event container class is rendering twice after refresh.
The cause of the duplication is here, in your events function:
$('#calendar').fullCalendar('addEventSource', events);
callback(events);
You are adding the event objects as an event source, AND sending them back to the calendar as a list of events, in the documented way. So while the events may not be duplicated in your database, your code is sending two sets of identical event data to the calendar, and consequently they are displayed twice.
You can simply remove this line:
$('#calendar').fullCalendar('addEventSource', events);
as it is totally unnecessary in this context.

Full calendar event rendering happens only for particular week

I am using fullcalendar plugin to display data for one week. The problem is event is rendering only for the week which i select first. Later when i change week events are getting created but are not rendering. When i change again to week I selected first, event creation and rendering both happens. I am using $('#calendar').fullCalendar('gotoDate', WeekStartDate) to go to desired week.
$.ajax({
type: "POST",
contentType: "application/json",
data: '{}',
url: 'DataService.svc/CMStrandSelection',
dataType: "json",
async: false,
success: function (data) {
$('#calendar').fullCalendar({
header: {
left: '',
center: '',
right: '',
height: 300
},
defaultView: 'basicWeek',
editable: true,
columnFormat: 'DD dddd',
events:
$.map(data.d, function (item, i) {
debugger;
var event = new Object();
event.id = item.eventId;
event.start = item.Start;
event.end = item.Endd;
event.title = item.Title
event.color = 'White';
event.allDay = true; //
return event;
}),
eventRender: function (event, element) {
//some code
});
}
});
$('#calendar').fullCalendar('option', 'height', 400);
}
});

bootstrap3 pretty-fullcalendar meteor not reactive in blaze

I'm using a bootstrap3 pretty-fullcalendar in a project and pre blaze, when I changed some properties of an event (such as color) it was immediately reflected in the display on the calendar. Now, when I change the attribute, I have to reload the calendar manually to have the change show up.
I'm instantiating the calendar in the template render function as
Template.packLayout.rendered = function(){
$('#calendar').fullCalendar({
//dayClick:function( date, allDay, jsEvent, view ) {
// Requests.insert({title:'Request',start:date,end:date,color:'red',className:'todo'});
// Session.set('lastMod',new Date());
//},
eventClick:function(reqEvent,jsEvent,view){
Session.set('editingReqEvent',reqEvent.id);
Session.set('showEditEvent',true);
},
eventDrop:function(reqEvent){
Requests.update(reqEvent.id, {$set: {start:reqEvent.start,end:reqEvent.end}});
Session.set('lastMod',new Date());
},
events: function(start, end, callback) {
var events = [];
reqEvents = Requests.find();
reqEvents.forEach(function(evt){
event = {id:evt._id,title:evt.title,start:evt.start,end:evt.end,color:evt.color};
events.push(event);
})
callback(events);
},
editable:true,
weekMode: 'liquid'
});
}
Has something changed that would make this happen?
Here is how i managed to get it working:
1) keep your calendar code as per "rendered"
Template.calendar.rendered = function () {
console.log('Calendar - running redered');
Session.set('calendarTemplateRendered', true);
var entries = Calendar.find().fetch(),
$calendar = $('#calendar');
$calendar.html('').fullCalendar({
header: {
left: '',
center: '',
right: ''
},
contentHeight: 1100,
defaultDate: '2014-01-12',
defaultView: 'agendaWeek',
editable: true,
selectable: true,
selectHelper: true,
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');
},
events: entries
});
Add a autorun:
Deps.autorun(function () {
if (Session.equals('calendarTemplateRendered', false) ||
!calendarSubs.ready() ||
typeof Calendar === 'undefined') {
console.log('exiting because there is no objects to process');
return;
}
console.log('trying to autorun');
var entries = Calendar.find().fetch(),
$calendar = $('#calendar');
$calendar.fullCalendar('removeEvents');
$calendar.fullCalendar('addEventSource', entries);
$calendar.fullCalendar('rerenderEvents');
}
Blaze will do the rest for you - (redraw the UI properly). Now you can just modify your Calendar subscription as you like and it will work perfectly.

Display only allDay events in a month view full calendar

How to display only allDay = true events in full calendar month view , and remaining non all Day events as usal in other views
You can do this by checking for view.name in a callback like eventRender. Take a look at this fiddle: http://jsfiddle.net/100thGear/vyKSZ/
Hope this helps!
$('#external-events div.external-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 1111999,
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();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek'
},
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();
}
},
eventDrop: function(event, delta, revertFunc) {
alert( event.id );
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/task/periodic-task-update",
data : {
id : event.id ,
date :event.start.format()
},
success: function(data) {
if(data=='Task Period Succesfully Changed'){
toastr.success("Task Period Succesfully Changed.");
}else{
toastr.success("Something Wrong");
revertFunc();
}
},
error: function(data,textStatus,xhr) {
toastr.success("Something Wrong");
revertFunc();
}
});
},
events: [
<c:forEach var='periodicTask' items='${periodicTaskTemplates}'>
<c:forEach varStatus="i" begin = "1" end = "12">
{ id: '${periodicTask.id}', title: '${periodicTask.task}', start: new Date(y, '${i.index}', '${periodicTask.startDate}'), end: new Date(y, '${i.index}', '${periodicTask.lastDate}') ,type:'${periodicTask.description}',location:'${periodicTask.location.name}'},
</c:forEach>
</c:forEach>`
],
});

Resources