So i have this calender. You can see below. When the page is first loaded i populate the 'events' propertie of the calender which works fine. What i am having problem with is updateing the 'events' propertie inside the 'viewrender' eventcallback. Is that possible.
Iam using fullcalender version 3.9.
I tried inside the viewrender to set .... this.setevents. But it dont seem to work
$("#request_calender").fullCalendar({
eventOverlap: true,
selectable: true,
views: {
listDay: {
buttonText: 'Custom View',
},
agendaWeek: {
columnFormat: 'ddd D/M'
}
},
slotLabelFormat: 'H:mm',
customButtons: {
toggleWeekends: {
text: 'show weekends',
click: function() {
toggleWeekends();
},
}
},
header: {
left: "prev,next today toggleWeekends unBooked",
center: "title",
right: "agendaDay,agendaWeek,month,listWeek"
},
weekends: false,
weekNumbers: true,
defaultView: 'agendaWeek',
select: function(startDate, endDate) {
start_date = startDate.format();
end_date = endDate.format();
new_request(start_date, end_date);
},
events: calender_array,
timeFormat: 'H(:mm)',
eventRender: function(e, t) {
//some code here
},
eventClick: function(event, jsEvent, view) {
console.log("event:", event);
request_id = event['request_id'];
request_details(request_id);
},
viewRender: function(view, element) {
//HERE I WANT TO GET DATA VIA A API AND PUSH TO EVENTS
if (view.name == 'listDay') {
showCustomView();
}
}
});
How can I save the data? In json or in any other format.
Its demo fullcalendar
Docs Date Clicking & Selecting
My main page:
Html code where i load data from list:
.
<html><head>
<meta charset="utf-8">
<link href="../lib/main.css" rel="stylesheet">
<script src="../lib/main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectMirror: true,
select: function(arg) {
var title = prompt('Event Title:');
if (title) {
calendar.addEvent({
title: title,
start: arg.start,
end: arg.end,
allDay: arg.allDay
})
}
calendar.unselect()
},
eventClick: function(arg) {
if (confirm('Are you sure you want to delete this event?')) {
arg.event.remove()
}
},
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2020-09-01'
},
{
title: 'Long Event',
start: '2020-09-07',
end: '2020-09-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2020-09-09T16:00:00'
}
]
});
calendar.render();});
</script>
</head>
<body class="">
<div id="calendar" class="fc fc-media-screen fc-direction-ltr fc-theme-standard"><div class="fc-header-toolbar fc-toolbar fc-toolbar-ltr"><div class="fc-toolbar-chunk"><div class="fc-button-group">
</body></html>
You need to query data using calendar.getEvents() and then save the file using e.g. How do I save JSON to local text file
Try to put more effort into reading the docs, FullCalendar has a very nice documentation.
I like the fullcalendar JQuery-Plugin. My calendar doesn't work. At the moment i am looking for a solution to add an event but i can't... Why ?
This is my code:
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2017-05-11',
editable: true,
selectable: true,
selectHelper: true,
eventLimit: true, // allow "more" link when too many events
select: function(start, end, allDay) {
var title = prompt("Event here: ", "New Event:");
if (title != null) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
$calendar.fullCalendar("unselect");
},
events: [
{
title: 'All Day Event',
start: '2017-05-01'
}
]
});
});
You need to define variable calendar like below
var calendar = $('#calendar').fullCalendar({
Then it will work.
I went through a couple of similar questions on stackoverflow. But, I couldn't get much help from them. Here is my problem :
I need to have multiple calendar on single page. But, currently only the first rendered calendar works properly. For example, if I have three calendars with different ids :
#calendarug1, #calendarug2, #calendarug3
Assume that order of declaring them in html page is
#calendarug3
#calendarug2
#calendarug1
Then only on #calendarug3 events like drag, drop and select work properly. On other calendars I am unable to create new events or drop new events.
Here is my code
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 calendarbox">
<div class="row well calendar">
<h3 >UG3 Timetable</h3>
<div id='calendarug3'>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 calendarbox">
<div class="row well calendar">
<h3 >UG2 Timetable</h3>
<div id='calendarug2'>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 calendarbox">
<div class="row well calendar">
<h3 >UG1 Timetable</h3>
<div id='calendarug1'>
</div>
</div>
</div>
</div>
</div>
JS
$('#calendarug3').fullCalendar({
// put your options and callbacks here
header: { // Display nothing at the top
left: '',
center: '',
right: ''
},
theme: true,
//aspectRatio: 2.44,
//eventSources: ['events.php'],
height: 520, // Fix height
columnFormat: 'dddd', // Display just full length of weekday, without dates
defaultView: 'agendaWeek', // display week view
hiddenDays: [0,], // hide Saturday and Sunday
weekNumbers: false, // don't show week numbers
minTime: '8:30:00', // display from 16 to
maxTime: '19:00:00', // 23
slotDuration: '00:30:00', // 15 minutes for each row
allDaySlot: false, // don't show "all day" at the top
selectable: true,
editable: true,
defaultDate: '2016-10-10',
droppable: true, // this allows things to be dropped onto the calendar
selectHelper: true,
select: function(start, end, jsEvent) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendarug3').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendarug3').fullCalendar('unselect');
},
//select: function(start, end, allDay) {
// Code for creating new events.
// alert("Create new event at " + start);
//},
eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
// Code when you resize an event (for example make it two hours longer
alert("I just got resized!");
},
eventDrop: function( event, jsEvent, ui, view ) {
// Code when you drop an element somewhere else
alert("I'm somewhere else now");
},
drop: function() {
// is the "remove after drop" checkbox checked?
console.log('calendar 3 viewRender');
if ($('#drop-remove3').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
//defaultView : 'agendaSixDay'
});
////////////////////////////////////////////////////////////////
$('#calendarug2').fullCalendar({
// put your options and callbacks here
header: { // Display nothing at the top
left: '',
center: '',
right: ''
},
theme: true,
//aspectRatio: 2.44,
//eventSources: ['events.php'],
height: 520, // Fix height
columnFormat: 'dddd', // Display just full length of weekday, without dates
defaultView: 'agendaWeek', // display week view
hiddenDays: [0,], // hide Saturday and Sunday
weekNumbers: false, // don't show week numbers
minTime: '8:30:00', // display from 16 to
maxTime: '19:00:00', // 23
slotDuration: '00:30:00', // 15 minutes for each row
allDaySlot: false, // don't show "all day" at the top
selectable: true,
editable: true,
defaultDate: '2016-10-10',
droppable: true, // this allows things to be dropped onto the calendar
selectHelper: true,
select: function(start, end, jsEvent) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendarug2').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendarug2').fullCalendar('unselect');
},
//select: function(start, end, allDay) {
// Code for creating new events.
// alert("Create new event at " + start);
//},
eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
// Code when you resize an event (for example make it two hours longer
alert("I just got resized!");
},
eventDrop: function( event, jsEvent, ui, view ) {
// Code when you drop an element somewhere else
alert("I'm somewhere else now");
},
drop: function() {
// is the "remove after drop" checkbox checked?
console.log('calendar 2 viewRender');
if ($('#drop-remove2').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
//defaultView : 'agendaSixDay'
});
$('#calendarug1').fullCalendar({
// put your options and callbacks here
header: { // Display nothing at the top
left: '',
center: '',
right: ''
},
theme: true,
//aspectRatio: 2.44,
//eventSources: ['events.php'],
height: 520, // Fix height
columnFormat: 'dddd', // Display just full length of weekday, without dates
defaultView: 'agendaWeek', // display week view
hiddenDays: [0,], // hide Saturday and Sunday
weekNumbers: false, // don't show week numbers
minTime: '8:30:00', // display from 16 to
maxTime: '19:00:00', // 23
slotDuration: '00:30:00', // 15 minutes for each row
allDaySlot: false, // don't show "all day" at the top
selectable: true,
editable: true,
defaultDate: '2016-10-10',
droppable: true, // this allows things to be dropped onto the calendar
selectHelper: true,
select: function(start, end, jsEvent) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendarug1').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendarug1').fullCalendar('unselect');
},
//select: function(start, end, allDay) {
// Code for creating new events.
// alert("Create new event at " + start);
//},
eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
// Code when you resize an event (for example make it two hours longer
alert("I just got resized!");
},
eventDrop: function( event, jsEvent, ui, view ) {
// Code when you drop an element somewhere else
alert("I'm somewhere else now");
},
drop: function() {
// is the "remove after drop" checkbox checked?
console.log('calendar 1 viewRender');
if ($('#drop-remove1').is(':checked')) {
// if so, remove the element from the "Draggable Events" list`enter code here`
$(this).remove();
}
}
//defaultView : 'agendaSixDay'
});
///////////////////////////////////////////////////////////////////////
I have fullcalendar with some JSON data. It shows up as "12a Medical Day Jackson Post". Otherwise the display is fine. When I change the dates to be "start":"12/2/2015" to this 2015-2-12. The 12a appen disappears.
The Code for fullcalendar used is this
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek'
},
defaultDate: '2015-03-11',
defaultView: 'month',
selectable: false,
selectHelper: false,
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');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
eventMouseover: function(event, jsEvent, view) {
if (view.name !== 'agendaDay') {
$(jsEvent.target).attr('title', event.title);
}
},
events:[
{
"title":"Medical Day Jackson Post",
"start":"12/2/2015",
"end":"12/3/2015",
"description":"Jackson"
},
By default it shows the time unless the event is an allDay event. If allDay isn't specified, it guesses and in your case, it guessed differently depending on the date format.
So, either make allDay explicit in you events, or stop the time from displaying on all events with timeFormat: "", as one of you fullCalendar options.