I'm working with jQuery fullCalendar to show a calendar. I'm also working with jQuery tabs to have multiple tabs.
I want to show the callendar in the first tab. This is what I have in my jQuery code:
$(document).ready(function(){
$("#reservatiestabs").tabs();
if($('#calendar').length) {
var dbEvents = <?php echo $events; ?>;
var calEvents = getEvents(dbEvents);
var calendar = $('#calendar').fullCalendar({
left: 'title',
center: '',
right: 'prev,next',
weekends: false,
defaultView: 'month',
defaultDate: moment(),
events: calEvents,
eventClick: function(calEvent, jsEvent, view) {
displayEvent(calEvent, calendar);
}
});
}
});
The problem is that my calendar isn't loaded when the page is loaded. The buttons are loaded but not the calendar.
How can I fix this?
UPDATE:
I've tried to do this like the following:
$(document).ready(function(){
$( "#reservatiestabs" ).tabs({ create: function( event, ui ) {
var dbEvents = <?php echo $events; ?>;
var calEvents = getEvents(dbEvents);
var calendar = $('#calendar').fullCalendar({
left: 'title',
center: '',
right: 'prev,next',
weekends: false,
weekNumbers: true,
weekNumberCalculation: "ISO",
defaultView: 'month',
defaultDate: moment(),
events: calEvents,
eventClick: function(calEvent, jsEvent, view) {
displayEvent(calEvent, calendar);
}
});
}});
});
But no difference ... .
Related
I am working with Bootstarp v4.0 with FullCalendar.io I have created FullCalendar as below
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar, events = localStorage.reservedRooms ? JSON.parse(localStorage.reservedRooms) : []
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
//defaultDate: '2019-04-12',
weekNumbers: true,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: events
});
calendar.render();
});
Where I am putting events from localStorage
I want to load fullcalendar from jQuery button click but I cannot do it. I also tried to create separate HTML file and try to load that HTML file in div by
$.get but it never render. I also tried to insert events by calendar.addEventSource( source ) but that too not works.
My jQuery button click
$(document).ready(function() {
$('#checkAvailability').click(function(e) {
$.get(
'../Shared Documents/html/meetingRoom/meetingRoomSearchResult.html',
function(data) {
$('#dvResult').html(data)
})
})
})
Please help me load calendar dynamically.
Alter your ajax to return only the events( as json), initialize the calendar when the ajax was successful
var calendar;
$('#checkAvailability').click(function(e) {
$.get(
'../Shared Documents/html/meetingRoom/meetingRoomSearchResult.html',
function(events) {
if(calendar) calendar.destroy();
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
//defaultDate: '2019-04-12',
weekNumbers: true,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: events
});
calendar.render();
});
})
add the div to your main page
<div id='calendar'></div>
I am using https://fullcalendar.io/ calendar i have used eventLimitText : "more" i want the date on click of eventLimitText
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
timeFormat: 'H:mm',
dayClick: function(date, jsEvent, view) {
alert('Clicked on: ' + date.format());
}
})
I have solved this problem by reading this documentation
Here is the code
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
timeFormat: 'H:mm',
eventLimitClick: function(cellInfo, jsEvent, view) {
var from_date_val = JSON.stringify(cellInfo.date);
var from_to_val = JSON.stringify(cellInfo.date);
},
});
I have a small problem with fullCalender.js. I am trying to change an option of the calendar after click a button, but it´s not working.
That is my js:
var calendar = $('#calendar');
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'month',
selectable: true
});
$('#but').on(click, function(e) {
calendar.fullCalendar('selectable', false);
});
And my html
<div id='calendar'></div>
<button id='but'>
Not selectable
</button>
Here the JSFiddle:
http://jsfiddle.net/CYnJY/874/
What am I doing wrong?
Thank you very much!
Change this $('#but').on(click, function(e) { to $('#but').on('click', function(e) {
Also use calendar.fullCalendar( 'destroy' ) to destroy calendar and create a new calendar.
$('#but').on('click', function(e) {
calendar.fullCalendar( 'destroy' )
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'month',
selectable: false
});
});
Check this http://jsfiddle.net/k4dhm3yL/
I implementing resourceDay view to single day for events using fullcalendar. when i split the resources column,i get different start date and end date but i want to same date all the resources column, i mean one date with different resource,please help me how fix this problem. my code for getting resourceDay view as follows.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
defaultView: 'resourceDay',
slotMinutes: 10,
selectable: true,
selectHelper: true,
editable: true,
contentHeight: 530,
resources: <?php echo json_encode($return_resource); ?>,
events: <?php echo json_encode($return_arr); ?>,
select: function(start, end, allDay) {
$(' #newSession').show();
$('.calendersize').css({marginLeft : "0px", width: "648px"});
var currentDate = ($.fullCalendar.formatDate(start, 'yyyy-MM-d'));
var agendaDate = ($.fullCalendar.formatDate(start, 'dddd MMM d, yyyy'));
$(' #agendaDate').text(agendaDate);
var startTimeSet=($.fullCalendar.formatDate(start, 'yyyy-MM-d hh:mm tt'));
var endTimeSet=( $.fullCalendar.formatDate(end, 'yyyy-MM-d hh:mm tt'));
......
},
please help me how to set same date for all the resource column.
Make sure the event object structure is correct and try this:
select: function(start, end, allDay, event, resourceId) {
alert(resourceId);
}
I am using fullCalendar in my website together with Bootstrap so that everytime I click on a day in month view, there is a popover to add event, just like that in Google Calendar. 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 ){
$(this).children().popover({
title: 'haha',
placement: 'right',
content: 'haha',html : true, container: 'body'
});
$(this).children().popover('show');
}
})
The code should be right before $(this).children().popover({ so that it closes all previously fired popover.
However, exactly, what code should I use to achieve this?
Thank you!
You can remove the popover or more specifically destroy the one created before by saving the reference (which would be a more specific and better approach).
var calendar = $('#calendar').fullCalendar({
height: '300px',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function (date, allDay, jsEvent, view) {
$(this).children().popover({
title: 'haha',
placement: 'right',
content: 'haha',
html: true,
container: 'body'
});
$('.popover.in').remove(); //<--- Remove the popover
$(this).children().popover('show');
}
});
Fiddle Method1
or
var $calPopOver; //create a variable to save refe
var calendar = $('#calendar').fullCalendar({
height: '300px',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function (date, allDay, jsEvent, view) {
$(this).children().popover({
title: 'haha',
placement: 'right',
content: 'haha',
html: true,
container: 'body'
});
if($calPopOver) //if there is something
$calPopOver.popover('destroy'); //then call popover destroy
$calPopOver = $(this).children().popover('show');
}
});
Fiddle Method2