I have a realtime multi timezone application that uses Signal R, all datetimes are broadcast using UTC and manipulated to the correct Timezone using moment timezone. The reason for this is because if we had many people logged on using different timezones, we would have to broadcast each update to the individuals already displaying the correct date time for that person, as oppopsed to 1 broadcast and manipulated client side. The timezone is stored as a string when the user logs in and is not reliant on the browser.
As i understand it FullCalendar will not manipulate the datetime using Timezone(i could be wrong). I checked out the example on your site and all the dates in the JSON are already converted which is not an option for me.
The route i have taken is to manipulate the dates in the eventRender.
The problem is that when you load for the first time the calendar displays them in UTC, if you change views it corrects it to the right date time. See the below fiddle, it loads as 11am then if you swap views it displays as 2pm which is the desired time. Ive used Istanbul as an example.
http://jsfiddle.net/JGuymer/oa4ahubo/6/
$(document).ready(function() {
function renderCalendar() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
timezone: 'Europe/Istanbul',
eventLimit: true, // allow "more" link when too many events
events: [{"id":1026,"taskTypeId":4,"title":"(New Appointment)","start":"2015-06-11T11:00:00Z","end":"2015-06-11T12:00:00Z","allDay":false,"url":null,"location":"","people":null,"className":"event-appointment"}],
eventRender: function(event, el) {
//console.log(event);
event.start.tz('Europe/Istanbul').format('DD MMM YYYY HH:mm');
event.end.tz('Europe/Istanbul').format('DD MMM YYYY HH:mm');
}
});
}
renderCalendar();
});
Is this the correct way of doing this? or is this a bug?
Related
My Calendar has a specific view : it shows 31 days (display 4 days before the current day, and 27 days after)
Therefore, I have a dynamic visibleRange for my view
let INIT = moment().subtract(4, 'days').format('YYYY-MM-DD');
let INIT_END = moment(INIT).add(31,'days').format('YYYY-MM-DD');
[...]
type: 'resourceTimeline',
visibleRange: {
start: INIT,
end: moment(INIT).add(31,'days').format('YYYY-MM-DD')
},
buttonText: '31 jours'
}
and previous/next don't seem to work when visibleRange is defined for a custom view.
I tried something involving jQuery and it mostly works, except you have to click first twice on prev/next to change the visibleRange (and you also have to click twice when you go from next to previous or vice-versa).
And I wanted for this :
calendar.setOption('visibleRange', {
start: INIT,
end: INIT_END
})
to work, but in my implementation, it only works once and when it's triggered, clicking on buttons doesn't work anymore.
You can find the code on this CodePen
Can you help me ?
Okay so a colleague of a colleague led me to the solution, thanks a lot to him.
Instead of using visibleRange and trying to manipulate FullCalendar's data with jQuery (very gross), I calculate the difference between my two moments in order to have a duration :
const INIT = moment().subtract(4, 'days');
const INIT_END = moment(INIT).add(31,'days');
let duration = INIT_END.diff(INIT, 'days')
Then I use this duration in the settings of my customView :
resourceTimelineRollingMonth: {
type: 'resourceTimeline',
duration: { days: duration },
buttonText: '31 jours'
}
and for my view to start 4 days before the current day, in the Calendar object, I set :
[...]
defaultDate: INIT.format('YYYY-MM-DD'),
[...]
Which now works flawlessly.
I am using fullCalendar package to add calendar in my project. By default the view shows by months and I want to change it to weekly bases.
From fullCalendar documentation, agendaWeekis what I am looking for.
I tried the following (didn't work):
$("#calendar").fullCalendar({
defaultView: 'agendaWeek'
});
When I create button and add the following event to it:
Template.appointments.events({
'click #check': function(e, t) {
e.preventDefault()
// console.log(Requests.find({}).fetch())
$('#calendar').fullCalendar('changeView', 'agendaWeek');
}
});
It works and the calendar changes.
My question is, how can set the calendar view to agendaWeek by default?
It would even be better if there is a way to make it similar to the calendar in their official page were there are three buttons (month, week, and day) buttons to choose from.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay', // gets you the three button tabs that you were looking for, similar to the demo
},
defaultView: 'agendaWeek' // default view is agendaWeek
});
Here is the jsfiddle for it.
I want to show event start time and and end time with title for the all day events in month view.
is there any method or property available in fullcalendar.io which can help me to achieve.
To do this, use the eventRender callback (see its description in docs).
function( event, element, view ) { ... }
You have 2 options to do what you need:
Modify the element that is being passed to the eventRender callback by changing its HTML.
From the docs:
element is a newly created jQuery element that will be used for rendering. It has already been populated with the correct time/title text.
Or, you can construct a custom element that fits your requirements and return it from the callback. Make sure to to return a <td> element for your all-day events:
The function can also return a brand new element that will be used for rendering instead. For all-day background events, you must be sure to return a <td>.
You may use eventRender as below
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: new Date(),
defaultView: 'month',
editable: true,
events: events,
eventRender: function (calEvent, element, view) {
//In my case I've created properties startTimeShort and endTimeShort
element.html("<span>" + calEvent.startTimeShort + "-" + calEvent.endTimeShort + "</span>");
}
});
Instead of showing our events, FullCalendar creates elements starting at the current date/time. I've tried this with multiple google calendars (public, custom, etc) and always get the same result.
$('#calendar').fullCalendar({
eventSources: [{
url:'https://www.google.com/calendar/feeds/jcornelius.com_e9lk2eh1p3tdn3v775l0e0v48g%40group.calendar.google.com/public/basic',
dataType : 'jsonp'
}]
});
See this fiddle to reproduce the issue.
http://jsfiddle.net/jcornelius/pba56nf1/
Turns out the permissions issue was an error with the Google calendar. I contacted Google support and they reset the permissions. Now with Richard Hermanson's answer above everything works.
Updated your sources and at least the example data works. Yours on the other hand seem to be invalid data or something? I'll try to help if the problem persists.
http://jsfiddle.net/pba56nf1/2/
$(document).ready(function() {
$('#calendar').fullCalendar({
events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
//events: 'https://www.google.com/calendar/feeds/jcornelius.com_e9lk2eh1p3tdn3v775l0e0v48g%40group.calendar.google.com/public/basic',
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
I have setup a google calendar using the gcal.js from fullcalendar which displays a month view easilty enough.
What I really want to do is display this calendar in a single day or agenda view instead of the default month view but I cannot for the life of me find any reference to whether this is possible.
You need to use the defaultView option and set the value to 'basicDay' or 'agendaDay' as listed in Available Views.
Code should look like:
$('#calendar').fullCalendar({
header: {
left: 'prev, next today',
center: 'title',
right: 'month, basicWeek, basicDay'
},
defaultView: 'basicDay'
});