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
Related
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
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.
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);
}
});
});
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