i'm trying to use the jQuery full calendar and i must set events dynamically. these are examples of events:
events: [
{
title: 'Long Event',
start: '2016-09-07',
end: '2016-09-10'
},
{
title: 'Conference',
start: '2016-09-11',
end: '2016-09-13'
},
{
title: 'Meeting',
start: '2016-09-12T10:30:00',
end: '2016-09-12T12:30:00'
},
{
title: 'Lunch',
start: '2016-09-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-09-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-09-12T17:30:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-09-28'
}
]
I have arrays with titles, start dates and end dates of events and i must set them in a loop.
Can someone help me and show me how must do?
Thank's
In this way you can use loop to set events dynamically (In PHP):
events:[
<?php for ($i=0; $i <count($countOfArray); $i++) { ?>
{
title: '<?php echo $countOfArray[$i]['Long_event']; ?>',
start: '2016-09-07',
end: '2016-09-10'
},
<?php } ?>
]
You can also customize date as well:
start: '<?php echo $countOfArray[$i]['YourDate']; ?>',
$(document).ready(function(){
var events = [your-json-array-of-events];
var eventsArray = [];
console.log('e',events);
$.parseJSON(events).forEach(function(element, index){
eventsArray.push({
title:element.title,
description:element.description.substring(0,30),
start:new Date(element.start_date).toISOString(),
end:new Date(element.end_date).toISOString(),
})
})
$(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: Date.now(),
editable: false,
eventLimit: true, // allow "more" link when too many events
events: eventsArray,
});
});
});
You can go with your events array and pass it as an events property value of the object options that is provided to fullCalendar():
var events = [{title: 'Long Event',start: '2016-09-07',end: '2016-09-10'},{title: 'Conference',start: '2016-09-11',end: '2016-09-13'},{title: 'Meeting',start: '2016-09-12T10:30:00',end: '2016-09-12T12:30:00'},{title: 'Lunch',start: '2016-09-12T12:00:00'},{title: 'Meeting',start:'2016-09-12T14:30:00'},{title: 'Happy Hour',start: '2016-09-12T17:30:00'},{title: 'Click for Google',url: 'http://google.com/',start: '2016-09-28'}];
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2016-09-12',
navLinks: true,
editable: true,
eventLimit: true,
events: events
});
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>
<div id="calendar"></div>
Related
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 am getting a
Too much recursion
error when I click on any event or date. Here is some of my code
$('#kt_calendar').fullCalendar({
isRTL: false,
header: {
left: 'prev title next today',
center: '',
right: 'month,listMonth'
},
buttonText: {
month: 'Calendar View',
list: 'List View'
},
editable: false,
eventLimit: true, // allow "more" link when too many events
navLinks: true,
events: events,
dayClick: function (date, jsEvent, view) {
load_day_events(date);
},
eventClick: function (info) {
if (info.id) {
load_event(info);
}
}
});
I am a student who is trying to develop a scheduler for a certain project, but I cannot seem to get FullCalendar to work on my page. I tried using the page the guide helps you create, but that did not work, so now I am trying to use one of the demo pages provided in the FullCalendar folder that I downloaded.
I previously used VS 2015, but now switched over to VS 2017 Community but that didn't help either.
My page:
#{
ViewData["Title"] = "Schedule";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<head>
<meta charset='utf-8' />
<link href='~/fullcalendar/fullcalendar.min.css' rel='stylesheet' />
<link href='~/fullcalendar/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='~/fullcalendar/lib/moment.min.js'></script>
<script src='~/fullcalendar/lib/jquery.min.js'></script>
<script src='~/fullcalendar/fullcalendar.min.js'></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: '2017-04-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-04-01'
},
{
title: 'Long Event',
start: '2017-04-07',
end: '2017-04-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-04-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-04-16T16:00:00'
},
{
title: 'Conference',
start: '2017-04-11',
end: '2017-04-13'
},
{
title: 'Meeting',
start: '2017-04-12T10:30:00',
end: '2017-04-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-04-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-04-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-04-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-04-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-04-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-04-28'
}
]
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<h2>Calendar</h2>
<div id='calendar'></div>
</body>
Thanks in advance to any helpers!
EDIT (April 26th):
I pressed F12 as suggested and saw that the console logs an error saying "Uncaught TypeError: $(...).fullCalendar is not a function".
I looked at some other posts that mentioned this issue but I could find no second mention of jquery and made sure the order of references was correct, which were the mentioned solutions in those situations.
Is there anything else that can be causing this?
EDIT (April 27th):
All files seem to be loading:
Loaded files in website
It looks like the layout page is calling the jquery file again, see this picture.
Try to remove one of them and make sure the jquery file is being called before the fullcalendar.js
I'm using fullcalendar in jquery dialog that is open when I click a button.
The calendar looks like this:
<script>
$(document).ready(function() {
calendar = $( "#calendar" ).fullCalendar({
height: 400,
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,month'
},
defaultView: 'agendaWeek',
slotDuration: '00:60:00',
slotLabelFormat:"HH:mm",
timeFormat: 'H(:mm)',
firstDay: 1,
allDaySlot: false,
selectOverlap: false,
selectable: true,
selectHelper: true,
editable: false,
eventStartEditable: false,
eventDurationEditable: false,
eventLimit: true,
select: function(start, end) {
var title = prompt('Purpose of this booking:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
}
$('#calendar').fullCalendar('unselect');
},
events: [
{
title: 'Test1',
start: '2016-05-26T10:00:00',
end: '2016-05-26T16:00:00',
allDay: false
},
{
title: 'Test2',
start: '2016-05-27T14:00:00',
end: '2016-05-27T18:00:00',
allDay: false
}
]
});
} );
$(function() {
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 610,
width: 900,
modal: true
});
$( ".btn-book" ).button().on( "click", function() {
dialog.dialog( "open" );
$('#calendar').fullCalendar( 'rerenderEvents');
$('#calendar').fullCalendar('render');
});
});
</script>
<button class='btn-book' type='button'>Book</button>
<div id="dialog-form" title="Book resource">
<form>
<div id='calendar'></div>
<input type="submit"/>
</form>
</div>
This is how it renders the events the first time:
As you can see, the events are not placed properly, the times don't match with the rows shown by the calendar...
Interestingly, if I enter a new event manually, then everything moves a bit and aligns automatically matching the times.
Is there any way to correct this?
I have below js.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
events: [
{
title: 'Absent',
start: new Date(y, m, 9),
color: '#008aaf '
}
]
});
The above js generates a calendar for me. The events parameter marks the event on the date specified in start field. Now i have to generate event dynamically based on my php date array which is as shown below:
Array
(
[0] => 28/07/2014
[1] => 30/07/2014
[2] => 01/08/2014
[3] => 29/07/2014
)
How can i generate events based on php date array?
What about something like this?
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
events: [
<?php
foreach($dateArray as $date)
{
$dateParts = explode("/",$date);
$dates[] = "{
title: 'Absent',
start: new Date(".$dateParts[2].", ".$dateParts[1].", ".$dateParts[0]."),
color: '#008aaf '
}";
}
echo implode(",",$dates);
?>
]
});