fullcalendar is not retrieving the events from google calendar, i read something that google calendar api does not support fullcalendar anymore?.i don't know if its true.
here is my code
$(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
googleCalendarApiKey: 'myApi',
eventSources: {
googleCalendarId: 'example#gmail.com'
}
})
});
UPDATE
make it work by using this code
eventSources: [
{ googleCalendarApiKey: 'your api key',
googleCalendarId: 'email#gmail.com',
className: 'fc-event-email'}];
From Nov 17th 2014, google shutdown V1 and V2 of their calendar API's.For full calendar to work with Google calendar upgrade to the latest version of FullCalendar or at least replace gcal.js with this file github.com/arshaw/fullcalendar/blob/v1.x/gcal.js . In the above code, you have to include googleCalendarApiKey and googleCalendarId inside eventSources. check this link fullcalendar.io/docs1/google_calendar for documentation
Related
I have a Ruby on Rails project that i'm currently working on that will schedule assigned work tickets for Technicians based on their availability and daily schedule using Full Calendar. I currently have several technicians schedules (start/stop times) saved in my Postgres database ready to be pulled and hopefully displayed into FullCalendar. The plan is for the Calendar to render the imported schedule and for the available times that a technician is working will be where I would like an event to only be placed and for the other areas in which they're not available to work I would like them to be greyed/darkened out.
So Far I have setup in an initial basic calendar and have been playing around with the eventConstraint option but that does not give the user any visual feedback on where events are allowed to be placed. This is what my current set up and technician schedules table looks like.
create_table "technician_schedules", force: :cascade do |t|
t.datetime "start_time"
t.datetime "end_time"
t.string "work_type"
t.integer "technician_id"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
end
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction', 'bootstrap' ],
themeSystem: 'bootstrap',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultView: 'timeGridWeek',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
businessHours: true,
eventConstraint: {
startTime: '2019-09-04T10:00:00',
endTime: '2019-09-05T20:00:00'
},
events: [
{
id: 999,
title: 'event',
start: new Date(2019, 9, 1)
},
],
windowResize: function(view) {
var current_view = view['name'];
var expected_view = $(window).width() > 576 ? 'timeGridWeek' : 'timeGridDay';
if (current_view !== expected_view) {
calendar.changeView(expected_view);
}
}
});
calendar.render();
});
I am still very new to FullCalendar and learning and I am not sure if eventConstraint would be the best option, nor am I familiar with how best to render pre planned schedules from my database. How do I best display a an imported work schedule with unavailable technician times greyed/darkened out with the other times being available for event assignment? Any help would be greatly appreciated. Thanks
My goal is to have 2 different FullCalendar elements that stay in sync. I'm not doing ANY network calls, simply client side arrays at this point.
When I add an event (say through a click or just right after it's built) the calendar does not actually re-render as the documentation claims.
I've also attempted to use the "renderEvents" and "renderEvent" flavors but that seems unnecessary since "updateEvents" would/should update the rendering of these events. The problem I also ran into is the "renderEvent" on the list version of the calendar does not show the event I'm adding if it's out of the range of that calendar.
const events = [{
title: 'All Day Event',
start: TODAY
},
{
title: 'Long Event',
start: TODAY,
end: NEXTDAY
}
]
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
events
})
$("#events").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
defaultView: 'listMonth',
events
})
// Now add a new one
events.push([{
title: 'Event added',
start: YESTERDAY
}])
$('#calendar').fullCalendar('updateEvents', events)
$('#events').fullCalendar('updateEvents', events)
Here's a recreation of the issue:
https://jsfiddle.net/Kikketer/7d92utp5/
The use case is pretty simple: Add a new event to the list of events, render the events on the calendar.
firstly change your pushing event to object from array.
events.push({
title: 'Event added',
start: YESTERDAY
});
Now, you have many choice to do that. I will write 2 way for you.
a.
$('#calendar').fullCalendar( 'removeEvents');
$('#calendar').fullCalendar('addEventSource', events);
https://jsfiddle.net/7d92utp5/49/
b. 1) Change events param to function
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
// at here
events: function (start, end, timezone, callback) {
callback(events);
}
});
2) Use refetchEvents instead updateEvents
$('#calendar').fullCalendar('refetchEvents');
https://jsfiddle.net/7d92utp5/53/
Im working in symfony2.5 framework.
In my app, i have a calendar page implemented with full calendar.js jquery plugin. (http://fullcalendar.io/).
I have a event table with records of employees' events.
How to display these events in the calendar page.
my calendar page's js:
$( '.calendar' ).fullCalendar({
header: {
left: 'prev,next,today',
center: 'title,',
right: 'month,agendaWeek,agendaDay'
}
});
Can anyone help me? Thanks in Advance!
First you have to parse your events as fullCalendar event object, following event documentation
var myEvent = {id: 1, title: 'myTitle', start: moment(...)}
Then, you should add those events to an array, function, json...
var mySourceEvents = [myEvent, myOtherEvent];
Finally you could set that array in your fullcalendar config as a source.
$('#calendar').fullCalendar({
eventSources: [
mySourceEvents
]
});
Or... You could add your events directly as an array:
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
allDay : false // will make the time show
}
]
});
Sorry for my English, I'm french
var options = {
header: {
left: 'prev,next',
center: 'title,today',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
prev: '<i class="icon-chevron-left cal_prev" />',
next: '<i class="icon-chevron-right cal_next" />',
today: "aujourd'hui",
month: "mois",
day:"jour",
week: "semaine"
},
monthNames:['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort:['janv.','févr.','mars','avr.','mai','juin','juil.','août','sept.','oct.','nov.','déc.'],
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: [ 'Dim','Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
events: 'actions.php?IDuser=1',
};
$('#calendar').fullCalendar(options);
My json:
[{"id":"2","title":"rt","start":"1367236500","end":"1367236500","url":null,"allDay":"false"},{"id":"5","title":"fgh","start":"1367236800","end":"1367596800","url":null,"allDay":"false"},{"id":"3","title":"test\u00e9 par moi","start":"1367237100","end":"1367258700","url":null,"allDay":"false"},{"id":"4","title":"dfsgfdgd","start":"1367323200","end":"1367326800","url":null,"allDay":"false"}]
I see events on all-days view but nothing on hours in week or day view.
I added allDayDefault: false but the result is the same.
in the json feed the allDay = false must be boolean. You have to remove the quotes from the "false"
Just for the people who are blocked on this later.
It's an optional parameter but the event won't show in week or day view if it's not specified in your json object return by your script! It will be displayed only in month view.
This is an error of the plugin documentation so be careful !
Remember and cross check about these values in your jQuery minTime: and maxTime: values, because FullCalendar works in 24 hours time format and remembers the time you are rendering it is according to the FullCalendar format.
I want to disable the allDay option just in the agenda view. I want it to be visible for the week and month view.
Right now I have this:
var calendar = $('#calendar').fullCalendar({
slotMinutes: 15,
defaultView: 'agendaWeek',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true
});
and another 200 lines of js but here is my initialization of the calendar object.
Can I do something like the following code for the viewObject constructor?
view: {
view:'agendaDay',
allDaySlot:false,
allDayText:false
},
How can I do this?
You are actually looking for Options Setters for fullCalendar. So you can do something like this:
viewDisplay: function(view) {
if( view.name == 'agendaDay' ){
$('#calendar').fullCalendar('allDaySlot',false); // Not supported yet
}
}
I've been dreaming about this as well, but unfortunately FullCalendar doesn't allow to set options on fly yet. But the following two links can be useful for you:
http://code.google.com/p/fullcalendar/issues/detail?id=293
https://github.com/arshaw/fullcalendar/pull/25