I am trying to show my google calendar schedule in my system using fullCalendar library. I had done all the steps as it is mentioned in the fullCalendar documentation. And it is working for week and month view. But for day view those schedule are not showing.
This is how I am integrating the calendar.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'googleCalendar','interaction', 'resourceDayGrid', 'resourceTimeGrid', 'bootstrap' ],
themeSystem: 'bootstrap',
defaultView: 'resourceTimeGridDay',
header: {
left: 'prev,next today',
center: 'title',
right: 'resourceTimeGridDay,timeGridWeek,dayGridMonth'
},
events: {
googleCalendarApiKey: 'I am giving my calendar api here',
googleCalendarId: 'giving calendar id here',
className: 'gcal-event'
}
});
calendar.render();
});
Version of my fullCalendar is 4.
Related
I'm doing some tests with the FullCalendar tool and I have an idea but can't find how to do it.
I'm playing with this demo from the ListView doc page : https://codepen.io/pen?editors=0010
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'listDay',
headerToolbar: {
left: 'title',
center: '',
right: ''
},
events: 'https://fullcalendar.io/api/demo-feeds/events.json'
});
calendar.render();
});
Is it possible to load the "listDay" on a specific day instead of the actual day ?
So the solution is to add an initialDate:'' in the parameters
Thank you #ADyson
the calendar shows the resources
Here is the code that generates the calendar
var calendarEl = document.getElementById('icalendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'resourceTimelineDay resourceTimeline2Day resourceTimeline3Day'
},
footerToolbar: {
left: 'today prev,next resourceTimelineDay resourceTimeline2Day resourceTimeline3Day',
center: '',
right: ''
},
initialView: 'resourceTimelineDay',
resourceAreaWidth: '15%',
slotMinTime: '08:00',
slotMaxTime: '21:00',
slotDuration: '00:20:00',
resourceAreaHeaderContent: 'Inspection Calendar',
resources: resources,
events: events,
resourceLabelDidMount: function (arg) {
arg.el.style.background = arg.resource.extendedProps.color;
},
})
calendar.render();
});
I see the json in the console, first array is the resource that shows and the second array is the events
Does anyone know why this would be invalid and not show the event?
I am super confused
Issue was the date didn't match what i was looking for
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 have fullcalendar working fine loading data using json from a flatfile(s).
I would like to load each months data from that months file on clicking prev/next.
Using ajax? events: function( start, end, callback ) addEventSource - removeEventSource? other?
Allow that jQuery is still a work in progress for me.
UPDATE:
I have set:
viewDisplay: function(view) { var next = view.title; alert(next); },
which gives me Month Year on clicking next/prev
How to parse this to json-events.php
I tried [split next] events: "json-events.php?month=month",
nope...
This is not using php, but you can change the AJAX call in getCalData() to do it.
EventSource will be filled with the next data.
I hope this helps a little bit.
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'resourceMonth'
},
defaultView: 'resourceWeek',
eventSources: [ getCalData() ],
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
viewDisplay: function (view) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', getCalData());
$('#calendar').fullCalendar('rerenderEvents');
}
});
});
function getCalData() {
var source = [{}];
$.ajax({
async: false,
url: '/mysite/GetWeekData',
data: { myParam: $('#calendar').fullCalendar('getView').visStart },
success: function (data) {
$(data).each(function () {
source.push({
title: $(this).attr('title'),
start: $(this).attr('start'),
});
});
},
error: function () {
alert('could not get the data');
},
});
return source;
}
fullcalendar by default send 2 additional parameters when getting events, params[:start], params[:end]
u can use them to return queried events between these 2 values
you can just add View Render property to configuration Object of fullcalendar
viewRender: function(view, element) {
//console.debug("View Changed: ",view.start, view.end);
// events = loadevents();
jQuery(nativeelement).fullCalendar('removeEvents');
jQuery(nativeelement).fullCalendar('addEventSource', events);
}
now you can load month by month.
This syntax for angular2
How can i get notified when the user click on 'next' (arrow) ?
I'm using the calendar in month view and I want to load the next month data on demand.
Also, do smbdy has an example of consuming data from ASP.NET (AJAX call) ?
you can use the viewDisplay trigger (http://arshaw.com/fullcalendar/docs/display/viewDisplay/) but that gets called also when the calendar loads, or the user switches views.
it sounds like you'd want an events function instead:
http://arshaw.com/fullcalendar/docs/event_data/events_function/
for the asp.net thing, have you looked here?
http://weblogs.asp.net/gunnarpeipman/archive/2010/02/03/using-fullcalendar-jquery-component-with-asp-net-mvc.aspx
Your way of approaching is wrong. You may need to write an API which returns the list of calendar objects in JSON, and use the following options.
$('#calendar').fullCalendar({
events: '/myfeed.php'
});
Then, fullcalendar will automatically call /myfeed.php whenever it needs.
e.g. If a user clicks 'prev' or 'next' month button.
Here's the example URL fullcalendar will generate :
/myfeed.php?start=1262332800&end=1265011200&_=1263178646
For more information, please visit the following URL.
http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/
Here the viewDisplay function is called when the user clicks next/prev. Also, you can see that is is getting the next lot of data via AJAX.
I hope this helps :)
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'resourceMonth'
},
defaultView: 'resourceWeek',
eventSources: [ getCalData() ],
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
viewDisplay: function (view) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', getCalData());
$('#calendar').fullCalendar('rerenderEvents');
}
});
});
function getCalData() {
var source = [{}];
$.ajax({
async: false,
url: '/mysite/GetWeekData',
data: { myParam: $('#calendar').fullCalendar('getView').visStart },
success: function (data) {
$(data).each(function () {
source.push({
title: $(this).attr('title'),
start: $(this).attr('start'),
});
});
},
error: function () {
alert('could not get the data');
},
});
return source;
}