I have a question regarding the next code, how can I fill the 'events' array dynamically, with a for / while ? ( I can't fill it manually due to the fact that there are a lot of datas )
Thank you
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
},
defaultDate: '2014-12-15',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Test',
start: '2014-12-17'
}
]
});
});
</script>
You can use IIFE (immediately-invoked function expression)
events: (function () {
var events = [];
for (var i = 0; i < 10; i +=1) {
// You can do here anything.
events.push({
title: 'Test' + i,
start: '2014-12-17'
});
}
return events;
})()
You can create an array variable and then use it when you initialize the calendar like so:
var events = [];
for(var i = 0; i < 10; i++) {
events.push({title: 'Test' + i, start: '2014-12-17'});
}
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
},
defaultDate: '2014-12-15',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: events
});
Related
I am using FullCalendar.js to enable a user to select a single date or range of dates from a visual calendar like this.
The documentation specifies that I should implement the select function to capture the start date startStr and end date endStr of the user's selection.
Below is the code I thought would do this:
$('#calendar').fullCalendar({
selectable: true,
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
defaultDate: today,
navLinks: true,
eventLimit: true,
events: [],
select: function(selectionInfo) {
console.log(selectionInfo.startStr);
console.log(selectionInfo.endStr);
}
});
Output:
undefined
undefined
Clearly my approach is not correct. What am I doing wrong?
This does not answer why the OP code is not working.
However, for anyone else experiencing the same issue, here is a different implementation which serves as a working solution.
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
selectable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
dateClick: function(info) {
console.log(info.dateStr);
},
select: function(info) {
console.log(info.startStr);
console.log(info.endStr);
}
});
calendar.render();
I had similar issue, I was checking wrong documentation version (I am using v3) which select function is implemented as follow:
select: function(startDate, endDate) {
alert('selected ' + startDate.format() + ' to ' + endDate.format());
}
I needed to make Google calendars look nice for a client, so I used Fullcalendar and it now looks great, thanks!
I have one problem though:
When I click on an event, the details display the GMT time. I tried a few things, but I am definitely not a developer, so I need help :)
Any help would be greatly appreciated! Here is my js code so far:
$(document).ready(function() {
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
googleCalendarApiKey: 'my api key',
events: 'my event',
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=600,height=400');
return false;
$scope.start = event;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
$(document).ready(function() {
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: 'my calendar xml link',
dataType: 'xml',
data: {
start: start.unix(),
end: end.unix()
},
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
},
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
googleCalendarApiKey: 'my api key',
events: 'my calendar id',
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=600,height=400');
return false;
$scope.start = event;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
Hi I'm using Javascript for loop to generate a string on looping C# list but I'm getting Error
Error 4 The name 'eventList' does not exist in the current context
My complete code is here
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'ProjectedYieldCalender.aspx/GetData',
data: '{}',
success:
function (data) {
var eventList = data.d;
alert(eventList.length);
// eventList = demo(eventList);
initCalendar(eventList);
}
});
});
function initCalendar(eventList) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
//defaultDate: '2014-08-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
<% for (var i = 0; i < eventList.count ; i++) { %>
{
title : eventList[<%=i%>].name,
start : eventList[<%=i%>].date
}
<% }%>
]
});
}
</script>
Cany any one please let me know where am I doing mistake and please let me know how to use the count of list in for loop . I'm getting proper result if I place some static value in for loop like 'i<5' in stead of 'i < eventList.Count'
You have to do like this. You are trying to access javascript array in asp.net code so it gives you that error.
function initCalendar(eventList) {
var events = [];
for(var i=0;i<eventList.length;i++)
{
events.push({ title : eventList[i].name , start: eventList[i].date });
}
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
//defaultDate: '2014-08-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: events
});
}
FullCalendar v2.2.5, I want to use my JSON generating script to pull data only for the visible area of the calendar as mentioned in a few other questions.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
defaultAllDay: true,
},
lazyFetching: false,
defaultDate: '2015-01-06',
editable: false,
eventLimit: 10,
weekMode: 'liquid',
dayPopoverFormat: 'DD/MM/YYYY',
//events: {
// url: 'instant-tools.cgi',
// type: 'POST',
// data: {
// events: 1,
// pending: 1,
// from: '2014-01-01',
// to: '2016-12-31',
// }
// },
viewRender: function(view, element) {
var events_slice = new Object();
events_slice.eventSources = [
{
url: 'instant-tools.cgi',
type: 'POST',
data: { events: 1, pending: 1, from: '2014-01-01', to: '2016-12-31' }
}
];
$('#calendar').fullCalendar('addEventSource', events_slice);
//$('#calendar').fullCalendar('renderEvents');
},
eventClick: function(calEvent, jsEvent, view) {
alert(calEvent.title + "n" + calEvent.start.format('DD/MM/YYYY') + " to " + calEvent.end.format('DD/MM/YYYY'));
},
});
});
The commented out events definition works (when I use it) but the viewRender one does not. Before you ask viewRender does get triggered. I get no errors in the console and no events displayed. My script is not called at all. I know I have the dates hardcoded right now but I will use view.intervalStart and view.intervalEnd once I verify I get a similar result. Having $('#calendar').fullCalendar('renderEvents'); in there makes no difference, also toggling lazyFetching does not make a difference. Not a JS coder so I hope I'm just being silly somewhere.
in the event property you need to call the function
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
defaultAllDay: true,
},
lazyFetching: false,
defaultDate: '$today',
editable: false,
eventLimit: 10,
weekMode: 'liquid',
dayPopoverFormat: 'DD/MM/YYYY',
events: function(start, end, timezone, callback) {
$.ajax({
url: 'instant-tools.cgi',
data: {
events: 1,
pending: 1,
from: '2014-01-01',
to: '2016-12-31',
},
success: function(doc) {
var obj = jQuery.parseJSON(doc);
var events = [];
$.each(obj, function(index, value) {
events.push({
id: value['id'],
//all data
});
//console.log(value)
});
callback(events);
},
error: function(e, x, y) {
console.log(e);
console.log(x);
console.log(y);
}
});
},
eventClick: function(calEvent, jsEvent, view) {
alert(calEvent.title + "n" + calEvent.start.format('DD/MM/YYYY') + " to " + calEvent.end.format('DD/MM/YYYY'));
},
});
});
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);
?>
]
});