I'm looking for clarification on what seems like a difference between the fullcalendar timezone documentation, and the actual behavior.
When the fullcalendar performs an API request from the month view, I receive what matches the documentation:
start=2017-01-01&end=2017-01-02
However, when the request occurs on the week or day view, I receive:
start=2017-01-01T00:00:00&end=2017-01-02T00:00:00
Based on the docs for no timezone, I expected the request to only be the date, without the time added on.
Anyone know if this is the correct behavior?
I'm just looking to confirm what's in the documentation. If this is expected, then I will look over what I am doing on my end.
This is my fullcalendar configuration:
$(document).ready(function() {
var events_url;
var default_date;
var default_view;
var element = document.querySelector('#calendar');
if (element !== null)
{
events_url = element.dataset.eventsUrl;
default_date = element.dataset.date;
default_view = element.dataset.calendarView;
default_view = fc_view_name[default_view];
}
$("#calendar").fullCalendar({
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: default_date,
defaultView: default_view,
editable: false,
events: events_url,
eventLimit: true,
firstDay: 1,
eventClick: function(event, jsEvent, view)
{
requestDialog(event.event_url, {'next': window.location.pathname});
},
viewRender: function(view, element)
{
var $calendar = $('#calendar');
var url_builder = $calendar.data('url-builder');
var date = $calendar.fullCalendar('getDate');
var public_calendar = $calendar.data('calendar');
var view_name = reverse_view_name[view.name];
setNextUrl(url_builder, view_name, date, public_calendar);
}
});
});
Related
what I'm possibly doing wrong!?
I do NOT see my events when 'defaultView: agendaWeek' (or agendaDay).
PS: basicWeek (or basicDay) works just fine.
BUT: when clicking the 'month' view: ALL events are showing correctly in 'month' view! Then, when again clicking 'week' (or Day) I see them ALL correctly as agendaWeek (or agendaDay) view!
I'm running fullcalendar: 3.6.2
PS: sorry, posted same issue in non-related forum
must miss a stupid thing - thanks for your time and hints, ed
<script type="text/javascript">
(function ($) {
#if (Model.tagColorsEnabled && Model.tagColors != null) {
<text>
var tagSet = [
#foreach (var tc in Model.tagColors)
{
#Display(tc)
}
];
var tagIndex = [];
for (var tag in tagSet) {
tagIndex[tagSet[tag].slug] = tag;
}
</text>
}
$('#calendar').fullCalendar({
locale: '#culture',
timeFormat: 'HH:mm', //eddie timeFormat: 'HH:mm{-HH:mm}',
slotLabelFormat: 'HH:mm', //eddie timeFormat: 'HH:mm{-HH:mm}',
// height: 500, //added by eddie
// allDay: false, // eddie
header: {
left: 'prev,next today',
center: 'title',
right: 'month, agendaWeek, agendaDay',
// right: 'month, agendaWeek, agendaDay' // eddie
},
eventRender: function (event, element) {
var colors = { bg : event.defaultBackgroundColor, br: event.defaultBorderColor, fg: event.defaultTextColor };
#if (Model.tagColorsEnabled)
{
<text>
var min = 100;
for (var klassNdx in event.className) {
var klass = event.className[klassNdx];
if (klass.substring(0, 4) === "tag-") {
var entry = tagIndex[klass.substring(4)];
if (entry !== undefined) {
if (entry < min) {
colors = tagSet[entry];
min = entry;
}
}
}
}
</text>
}
$(element)
.css("background-color", colors.bg)
.css("color", colors.fg)
.css("border-color", colors.br);
},
editable: false,
events: {
url: '#Url.Content("~/_Calendar/" + Model.queryId)',
},
// defaultView: '#Model.defaultView',
// defaultView: 'basicWeek',
defaultView: 'agendaWeek',
weekends: #Model.showWeekends
//viewRender: function (v, e) { alert("Rendering view"); }
});
})(jQuery);
</script>
solved - sort of!
When using 'defaultView: basicWeek / agendaWeek'; fact is that I get different DateTime info like:
basicWeek: '2017-1-06' --> which in turn works correctly!
agendaWeek: '2017-1-06T00:00:00' --> which results in an error!
When stripping off 'T00:.....' --> problem solved
I know that this is probably not the 'clean' solution BUT for the time being ..... will further check if time is available!
For now I like to thank ADyson for his advise and time spent.
Im trying to filter events in fullcalendar on select change which almost works.
This is my dropdown
<select id="dropdown">
<option value="All" data-feed="all-feed.php" selected>All</option>
<option value="This" data-feed="this-feed.php">This</option>
<option value="That" data-feed="that-feed.php">That</option>
</select>
This my script
$(document).ready(function(){
var feed = $('#dropdown').find(':selected').data('feed');
$('#calendar').fullCalendar({
locale: 'de',
editable: false,
firstDay: 1,
events: feed,
eventLimit: 3,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listWeek'
}
});
$('#dropdown').change(onSelectChangeFeed);
function onSelectChangeFeed() {
var feed = $(this).find(':selected').data('feed');
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', feed);
};
});
This works untill I click the next or prev buttons. Then all events Ive filtered are added somehow in the "background": https://streamable.com/qnqwd
Ive also tried this function but then the events are added directly.
function onSelectChangeFeed() {
$('#calendar').fullCalendar('removeEventSource', feed);
$('#calendar').fullCalendar('refetchEvents');
var feed = $(this).find(':selected').data('feed');
$('#calendar').fullCalendar('addEventSource', feed);
$('#calendar').fullCalendar('refetchEvents');
};
Heres a fiddle https://jsfiddle.net/4j5s9yp2/5/
Your code doesn't quite work consistently, because you use "events" and "eventSources" interchangeably, and they are not the same concept. You also try to remove an eventSource with the wrong ID - as per the example in JSFiddle, by the time you call var feed = $(this).find(':selected').data('feed');, feed is set to the newly selected feed value. Therefore it cannot match it to an event source in the calendar to remove, because the event source currently defined is the old feed value.
This version resolves both issues:
var selectedFeed = $('#dropdown').find(':selected').data('feed');
$('#calendar').fullCalendar({
locale: 'de',
editable: false,
firstDay: 1,
displayEventTime: false,
eventSources: [ selectedFeed ], //event source, not "events" directly
eventLimit: 3,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listWeek'
},
loading: function(bool) {
if (bool) {
$(this).parent().find('#loading').fadeIn( "300");
}else {
$(this).parent().find('#loading').fadeOut( "300");
}
}
});
$('#dropdown').change(onSelectChangeFeed);
function onSelectChangeFeed() {
var feed = $(this).find(':selected').data('feed');
$('#calendar').fullCalendar('removeEventSource', selectedFeed); //remove _old_ feed value
$('#calendar').fullCalendar('addEventSource', feed);
selectedFeed = feed; //set currently selected feed to the new value
};
See https://jsfiddle.net/4j5s9yp2/6/ for a working example.
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.
I am integrating fullCalendar in my meteor application. fullCalendar expects a specific data format. I can create that data from my Collection. However the data is no longer reactive.
What is a way I can make the data I translated from my Collection to an Array "reactive"?
Thanks.
Client html:
<template name="carpool_calendar">
<div id="calendar"></div>
</template>
Client JS:
Template.carpool_calendar.rendered = function () {
//initialize the calendar in this template
$('#calendar').fullCalendar({
events: function(start, end, callback) {
var events = [];
var calendarEvents = Carpool_Events.find();
calendarEvents.forEach(function (carpool_event) {
events.push({
title: carpool_event.owner,
start: carpool_event.eventDate
});
console.log("Event owner " + ": " + carpool_event.owner);
});
callback(events);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
weekends: false, // will hide Saturdays and Sundays
editable: true
});
};
Updated Client JS (This is not quite right yet. Its recreating the calendar on every data change...the page gets longer and longer with new calendar instances):
Template.carpool_calendar.rendered = function () {
Meteor.autorun(function() {
//initialize the calendar in this template
$('#calendar').fullCalendar({
events: function(start, end, callback) {
var events = [];
var calendarEvents = Carpool_Events.find();
calendarEvents.forEach(function (carpool_event) {
events.push({
title: carpool_event.owner,
start: carpool_event.eventDate
});
console.log("Event owner " + ": " + carpool_event.owner);
});
callback(events);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
weekends: false, // will hide Saturdays and Sundays
editable: true
});
})};
Client JS Fully working "reactive" fullcalendar:
Template.carpool_calendar.rendered = function () {
//initialize the calendar in this template
$('#calendar').fullCalendar({
events: function(start, end, callback) {
var events = [];
var calendarEvents = Carpool_Events.find();
calendarEvents.forEach(function (carpool_event) {
events.push({
title: carpool_event.owner,
start: carpool_event.eventDate
});
console.log("Event owner " + ": " + carpool_event.owner);
});
callback(events);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
weekends: false, // will hide Saturdays and Sundays
editable: true
});
Meteor.autorun(function() {
var calendarEvents = Carpool_Events.find();
$('#calendar').fullCalendar('refetchEvents');
});
};
Like TimDog said, you can't give the UI element a reactive array, and let it take care of the rest. But another option is you could use Meteor.autorun so when your collection changes, it can trigger a JS function to make an updated array, thereby making it somewhat reactive.
I'm not sure how to use this calendar exactly, but adding this into your client side code might help.
Meteor.autorun(function() {
calendarEvents = Carpool_Events.find();
$('#calendar').fullCalendar({
events: function(start, end, callback) {
var events = [];
calendarEvents.forEach(function (carpool_event) {
events.push({
title: carpool_event.owner,
start: carpool_event.eventDate
});
});
callback(events);
}
});
});
This is part of a bigger question regarding how to properly create UI components for Meteor that ensure reactive data contexts. It's a very good question and one that's been asked before.
The short answer is that there is no standardized framework yet -- like a Meteor.UI smart package. In the interim, however, your best bet is to hack the fullCalendar widget using the {{#each}} helper source as your guide. You'll want to pay attention to how data elements are labeled with Spark:
'each': function (data, options) {
var parentData = this;
if (data && data.length > 0)
return _.map(data, function(x, i) {
// infer a branch key from the data
var branch = (x._id || (typeof x === 'string' ? x : null) ||
Spark.UNIQUE_LABEL);
return Spark.labelBranch(branch, function() {
return options.fn(x);
});
}).join('');
else
return Spark.labelBranch(
'else',
function () {
return options.inverse(parentData);
});
},
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/