We Keep Coding

how to alert next month date

I'm using "fullcalendar" plug- https://fullcalendar.io/ in order to display tours on calendar
when user click next/pre button, how do i ALERT the next/pre full date?
for instant, if the calendar show me the current day (2019-06-03) and i click "next" then alert will display 2019-07-01. clicking "pre" will display 2019-05-01
my code:
<div id="calendar"></div>
<script>
$(document).ready(function() {
var initialLocaleCode = 'en';
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
eventLimit: true,
editable: false,
events: [
{
title: 'tour 1',
start: '2019-05-05',
end: '2019-05-11',
className: 'bg-warning'
},{
title: 'title for tour num 2',
start: '2019-05-19',
end: '2019-05-25',
className: 'bg-purple'
},{
title: '3td tour title',
start: '2019-05-16',
end: '2019-05-21',
className: 'bg-info'
}
]
});
});
</script>

I'm not sure why you'd need to do this, since the new date will already be displayed at the top of your calendar.
However, putting that aside, one way to achieve it is to handle the viewRender event. This will occur anytime either the date range or the type of view is changed on the calendar, and fires just before the new view is actually displayed on the screen. As per the documentation, the view object supplied in the callback contains the the start and end dates which are about to be displayed.
You could write something like this:
viewRender: function( view, element )
{
alert(view.start.format("YYYY-MM-DD"));
}
Here's a working demonstration: http://jsfiddle.net/8bxqzfev/

Sync FullCalendar With Another FullCalendar Same Page

Using FullCalendar I am able to display 2 calendars on the same page. Calendar1 has all the controls to switch views from Day, Week, Month, Year plus the arrows to go forward/backwards. Calendar2 is a listMonth with no controls showing. It works fine on load but I would like it to change when Calendar1 changes from month to month or year to year.
Is this possible? I haven't found anything that would allow me to change the listMonth when the month/year changes on Calendar1.
jQuery(document).ready(function () {
$('#calendar1').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month,listYear'
},
views: {
listYear: { buttonText: 'Year'}
},
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: "CalendarData.ashx",
eventColor: '#038ddd'
});
$('#calendar2').fullCalendar({
header: {
left: '',
center: '',
right: ''
},
views: {
listMonth: { buttonText: 'Month' }
},
defaultView: 'listMonth',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: "CalendarData.ashx",
eventColor: '#038ddd'
});
});

I had a need to implement this recently to sync a grid and list view. I came across this question, but the suggested comments no longer appear valid. Here is a simple solution I used.
This is the simple html container for both calendars.
<div>
<div id="calendarGrid"></div>
<div id="calendarList"></div>
</div>
Below is the javascript code to hook into the "datesSet" method that triggers as the user navigates through the calendar and sets the date for the "other" calendar to keep it in sync, including a date comparison to prevent an infinite loop.
var calendarElGrid = document.getElementById('calendarGrid');
var calendarElList = document.getElementById('calendarList');
var calendarGrid = new FullCalendar.Calendar(calendarElGrid, {
initialView: 'dayGridMonth',
datesSet: function (info) {
syncCalendar(calendarList, info.start);
}
});
calendarGrid.render();
var calendarList = new FullCalendar.Calendar(calendarElList, {
initialView: 'listMonth',
datesSet: function (info) {
syncCalendar(calendarGrid, info.start);
}
});
calendarList.render();
function syncCalendar(otherCalendar, startDate) {
if (otherCalendar.getDate().toDateString() != startDate.toDateString()) {
otherCalendar.gotoDate(startDate);
}
}
Solution is based off of v6.0.2 documentation here:
https://fullcalendar.io/docs/datesSet

I want to display event dynamically in fullcalendar 3.0.1

below is my code. i don't know why the calendar are working but no event displayed. I very appreciate your help.
var eventSTR = [{start: '2016-11-21',end: '2016-11-23',overlap: false,rendering : 'background', color: '#ff9f89'},];
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month',
},
defaultDate: today,
navLinks: false, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: false,
event : eventSTR
});
});

You're 99% there, just missing 2 things
1) you need to set the today variable before you set the document ready function:
var today = new Date();
2) you've misspelled the events property. You have:
event : eventSTR
it should read:
events : eventSTR

fullcalendar with clickable popup on eventclick

I am having a popup form. I have events in fullcalendar page.
I need to pop up this form on click of any event from full calendar.
Have tried full calendar with modal but based on my requirement, i require my pop up form only.I tried with window.open("url"), but it goes to next page.
Here's my code but it need to create a clickable popup.I have added my form through an image below, which shall popup on click of event. kindly acknowledge me asap..
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
utc: true,
header: {
left: 'prev,next today EventButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
events: [
{
title: 'All Day Event',
start: '2016-07-01',
end: '2016-07-01'
},
{
title: 'Long Event',
start: '2016-07-07',
end: '2016-10-08'
}
],
eventClick: function(event, jsEvent, view) {
console.log(event.id);
window.open("<?php echo base_url() ?>common/calendar/form_calendar");
}
});
});

jQuery qTip and FullCalendar with agendaWeek as view

I am making a website that anyone can embed our calendar using iFrame. That calendar is using FullCalendar and qTip.
I am using FullCalendar with a default view of agendaWeek, the problem with that is when I click on an event the qtip appears, but when I scroll down, the qtip popup position is like fixed. It is very difficult to explain so here's the jsfiddle
Here's my code:
$("#calendar").fullCalendar({
defaultView: 'agendaWeek',
allDayDefault: false,
allDaySlot: false,
columnFormat:{
week: 'ddd dS'
},
events:{
url:"http://<?=$rootUrl;?>/studios/fetch_event_calendar_public/",
data:{
id:"<?=$studio_id;?>",
}
},
eventRender: function(event,element,view){
... ... ... ..
jQuery(element).qtip({ // Grab some elements to apply the tooltip to
id: 'calendar',
content: {
text: html,
button: 'Close',
title: 'Event Details',
},
style: 'qtip-light',
position: {
my: 'bottom center',
at: 'top center'
},
show:{
event:'click',
},
hide:{
event: 'unfocus'
},
});
},
windowResize: function( view ) {
calendar.fullCalendar('option', 'height', $(window).height() - 40);
}
});
So what I want here is that when the fullcalendar is scrolled down or up, the qtip should not have a position of fixed, it should just stay where the event is.
Your help will be greatly appreciated! Thanks!