Hi i'm trying to loop inside the jquery Fullcalendar events, but i don't know why this is not working :
var birthdaysList = #Html.Raw(Json.Encode(#ViewBag.birthdaysList));
$(document).ready(function () {
$('#calendar').fullCalendar({
lang: 'es',
header: {
left: 'title',
center: '',
right: 'prev,next today'
//right: 'month,agendaWeek,agendaDay'
},
eventLimit: true, // allow "more" link when too many events
events: //My loop here for title: birthdaysList.name , start birthdaysList.date
});
});
OK first of all, you can't do a loop inside envents: , you have to make an array and then call it from the envents: , like this:
var birthdaysList = #Html.Raw(Json.Encode(#ViewBag.birthdaysList));
var events = []; //The array
for(var i =0; i < birthdaysList.length; i++)
{events.push( {title: birthdaysList[i].name , start: birthdaysList[i].date})}
$(document).ready(function () {
$('#calendar').fullCalendar({
lang: 'es',
header: {
left: 'title',
center: '',
right: 'prev,next today'
//right: 'month,agendaWeek,agendaDay'
},
eventLimit: true, // allow "more" link when too many events
events: events
});
});
Related
I need to reference an fullcalendar object – to change contents or options after intialisation - , but I always get the error message.
I first tried the javascript initialisation and then the jQuery version. I've tried "calendar.refech()" and "calendar.fullcalendar.refetch()" and "$.(#calendar)('refetchEvents')"
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
$(function() {
$('#calendar').fullCalendar({
plugins:
[ 'interaction', 'dayGrid', 'timeGrid' ,'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
locale: 'de',
defaultDate: heute,
{…}
editable: true,
eventLimit: true,
events: 'load.php',
})
});
});
$('#calendar').getOption('locale');
The last line in code produces the errror: "Uncaught TypeError: $(...) is not a function
As noted in your code, calendarEl is initialized but never used.
Basically, you can initialize the main Calendar object out of eventListener DOMContentLoaded, and utilize it as global within that page like the following code:
var myCalendar;
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var myCalendar = new FullCalendar.Calendar(calendarEl, {
plugins:
[ 'interaction', 'dayGrid', 'timeGrid' ,'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
locale: 'de',
defaultDate: heute,
{…}
editable: true,
eventLimit: true,
events: 'load.php'
});
myCalendar.render();
});
The initialization of Calendar object is provided in this link.
The calendar doesn't display hours beside .
i have uploaded a picture and put the code to understand the problem more
how can i correct it ?
Code javascript :
$(document).ready(function () {
var date = new Date();
// the code display the calendar
$('#calendar').fullCalendar({
// the header
header:{
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
lang: 'fr',
buttonIcons: false, // show the prev/next text
editable: true, // resize event
eventLimit: true, // allow "more" link when too many events
minTime: '06:00:00',
maxTime: '20:00:00',
eventRender: function (event, element) {
element.find('.fc-title').append(" || " + event.type);
},
dayClick: function (date, jsEvent, view, resourceObj) {
//getting the clicked date from calendar
},
eventClick: function (calEvent) {
// event clicked
},
// events redered in twig template
// I an working with symfony
events:{{ events|raw }}
})
});
thank you very much i'm using fc-time{ display: none;} it's working now
I used this full calendar which takes events from ajax call
i want it to get new ajax values on button click event, how could this work?
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events:{
url: 'emp-attendance-ajax.php?id=' + id
},
});
if you need to update one event ( better because faster ) :
.fullCalendar( 'updateEvent' , event )
else I think it's
.fullCalendar( 'refetchEvents' )
It's resolved i used this
events: {
url: 'emp-attendance-ajax.php',
type: 'POST',
data: function() { // a function that returns an object
return {
id: id
};
}
},
instead of this one
events:{
url: 'employees-attendance/emp-attendance-ajax.php?id=' + i++
},
and it's worked
I want to load all events in full calendar using Ajax when the page loads.I am getting response from Ajax.But the event is not added in Full calendar.
here is my jquery code
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-06-12',
editable: true,
events: function(start,end,callback){
var mydata = {
action: "fw_ajax_callback",
subaction: "get_myappointments",
};
$.ajax({
url :ajax_url,
type: 'POST',
data: mydata,
dataType: 'json',
success:function(appointments){
var events = [];
if(!!appointments){
$.map( appointments, function( r ) {
events.push({
title: r.title,
start: r.start,
end: r.start
});
});
}
callback(events);
}
})
}
});
From my console I found an error stating callback is not a function.Please help me i am a newbie.
I think you are making what is supposed to be easy look very complex: I have added a JSFiddle Link to show you how it work.
$('#calendar').fullCalendar({
//theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: moment().format("YYYY-MM-DD"),
editable: true,
events: {
url: 'http://www.json-generator.com/api/json/get/ccUKVDYErS?indent=2',
error: function() {
$('#script-warning').show();
},
success: function(){
alert("successful: You can now do your stuff here. You dont need ajax. Full Calendar will do the ajax call OK? ");
}
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
I am using fullCalendar with bootstrap popovers. The goal is to append a form for adding new event inside the popovers. The code does make the popover appears above the cells, however, on clicking the popovers, the cells underneath it are selected rather than the popovers themselves.
Here is my code:
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
height: height,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function( date, allDay, jsEvent, view ){
if (view.name=='month'){
$(this).children().popover({
placement: 'right',
content: function() {return $("#popover-content").html();},
html : true, container: 'body'
});
$('.popover.in').remove();
$(this).children().popover('show');
..........
and html
<div id="popover-content" class="hide">
<form>
<input id="easyeventtitle" />
</form>
</div>
This is how it looks like
I have tried z-index to popovers, instead, they do not appear at all!
Please help! Thank you for your time!
Edit: here is the link to test it
Try this code
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
events: '/events.json',
editable: true,
selectable: true,
dayClick: function(start, end, allDay, jsEvent, view) {
$(this).popover({
html: true,
placement: 'right',
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
},
html: true,
container: 'body'
});
$(this).popover('toggle');
}
});
});