AngularJS FullCalendar - Events not loading on initial load - javascript

Issue
I am struggling to get my events to populate the Full Calendar on load. The events work fine when I change the month, but when the application first loads they don't seem to appear.
Code
Here is my code for for the UIConfig of the Calendar:
//THIS CALLS MY GET METHOD.
var holidaysnew = getUserEventsById.getUserEventsById();
$scope.uiConfig = {
calendar: {
viewRender: function (view, element) {
holidaysnew.forEach(function (hol) {
$scope.eventSources[0].events.push({
end: $filter('dateFilter')(hol.HOLIDAY_END),
start: $filter('dateFilter')(hol.HOLIDAY_START),
title: hol.HOLIDAY_TITLE,
color: $filter('colorEventFilter')(hol.HOLIDAY_EVENT_STATE_ID)
});
});
},
height: 850,
editable: true,
header: {
left: '',
center: '',
right: ''
},
}
};
Now the viewRender gets hit on load aswell as when I change the month. The weird thing is it only works when you click a new month.

#Ben problem is that you are making http call in service. But here calendar will not wait for http response. So calendar loads first then after you will receive http response that's why you are not getting response first time. You need to change the way to load events like below.
$scope.uiConfig = {
calendar: {
events: function(start, end, timezone, callback) {
$http({
method : "GET",
url : 'your_url_to_fatch_events',
data : {start: startDate, end: endDate, id: userId}
}).then(
function (olidaysnew) {
var events = [];
// or make your events
olidaysnew.forEach(function (hol) {
events.push({
end: $filter('dateFilter')(hol.HOLIDAY_END),
start: $filter('dateFilter')(hol.HOLIDAY_START),
title: hol.HOLIDAY_TITLE,
color: $filter('colorEventFilter')(hol.HOLIDAY_EVENT_STATE_ID)
});
)}
callback(events);
}
)
},
height: 850,
editable: true,
header: {
left: '',
center: '',
right: ''
},
}
}

Related

Custom buttons in full calender

I am trying to add custom buttons to the full calendar as per the UI requirement. I want to add and subtract one year on right and left custom buttons click. But the problem is when I call this. calendar('prevYear') on click functions, it throws an error this. calendar is not a function as I am accessing the calendar property inside the calendar init phase. How can implement this click function?
I am using alpine.js to initialize the full calendar and define its option. Is there any way to only change the icon of left and right but the function is automatically added by the full calender ?
<div
x-data="{
calendar: null,
events: [
],
init() {
this.calendar = new FullCalendar.Calendar(this.$refs.calendar, {
initialDate: '2022-12-19',
initialView: 'dayGridMonth',
selectable: true,
unselectAuto: false,
editable: true,
customButtons: {
prevYear: {
text: '<<',
click: function() {
this.calendar('prevYear')
}
},
nextYear: {
text: '>>',
click: function() {
this.calendar('nextYear')
}
}
},
headerToolbar: {
left: 'prevYear',
center: 'title',
right: 'nextYear'
},
views: {
dayGridMonth: {
titleFormat: { year: 'numeric' }
}
},
})
this.calendar.render()
},
}"
>
<div x-ref="calendar"></div>
</div>

How to scroll to current day after render calebdar?

I'm using fullcalendar.io.I want to scroll up to the current date after the render of the calendar on listMonth view.
calendar code:
if ($(window).width() < 768) {
columnFormat = 'ddd';
defaultView = 'listMonth';
left = 'prev,next';
right = 'month,listMonth';
} else {
columnFormat = 'dddd';
defaultView = 'month';
left = 'prev';
right = 'next';
}
$('#calendar').fullCalendar({
header: {
left: left,
center: 'title',
right: right
},
timeFormat: 'H:mm',
columnFormat: columnFormat,
defaultView: defaultView,
events: {
url: MyAjax.ajaxurl,
type: 'POST',
data: {
action: 'events_list',
security: MyAjax.security,
},
},
eventClick: function (event, jsEvent, view) {
if (event.url) {
window.open(event.url, "_blank");
return false;
}
},
});
Please help me to do it.
Example: https://jewlife.by/
Muhammad's answer is fine for most of FullCalendar's views, but alas the listMonth view does not support that approach for jumping to a particular day in the current month.
Instead, you need to programmatically scroll to the current day. Something like the following will work fine:
// Initialise the calendar
$("#calendar").fullCalendar({
eventAfterAllRender: function (view) {
if (view.name === "listMonth") {
var viewStartDate = $("#calendar").fullCalendar("getDate");
var target = $(".fc-listMonth-view .fc-list-heading[data-date=" + viewStartDate.format("YYYY-MM-DD") + "]");
if (target.length) {
$(".fc-listMonth-view .fc-scroller").scrollTop(target.position().top);
}
}
},
// Other initial settings here
});
Tested and working as of FullCalendar v3.9.0.
you should use goToDate() if you want to navigate to a date after the calendar has loaded, via the click of a button, it moves the calendar to an arbitrary date.
$('#calendar').fullCalendar( 'gotoDate', date )
Note: date can be a `Moment object or anything the Moment constructor accepts.
Or if you like the calendar to load on a specific date then you should use the defaultDate option while initializing the calendar.
You can learn more here
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: '2017-11-12',
defaultView: 'listMonth',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [{
title: 'Old Day Event',
start: '2014-05-01'
}, {
title: 'All Day Event',
start: '2017-11-01'
},
{
title: 'Long Event',
start: '2017-11-07',
end: '2017-11-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-11-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-11-16T16:00:00'
},
{
title: 'Conference',
start: '2017-11-11',
end: '2017-11-13'
},
{
title: 'Meeting',
start: '2017-11-12T10:30:00',
end: '2017-11-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-11-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-11-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-11-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-11-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-11-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-11-28'
}
]
});
var local = $.fullCalendar.moment('2014-05-01T12:00:00');
calendar.fullCalendar('gotoDate', local);
});
#goto {}
<script src="https://fullcalendar.io/js/fullcalendar-3.7.0/lib/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-3.7.0/fullcalendar.min.js"></script>
<link href="https://fullcalendar.io/js/fullcalendar-3.7.0/fullcalendar.min.css" rel="stylesheet" />
<link href="https://fullcalendar.io/js/fullcalendar-3.7.0/fullcalendar.print.min.css" rel="stylesheet" />
<p>calendar is navigated to previous date November in 2014 after loading on 2017 by default </p>
<div id='calendar'></div>

Full Calendar listDay error: spec.class is not a constructor

According to the fullCalendar documentation there are nine different views available. Five of these views have demos while the others do not. Becuase the monthly view is not responsive I am interested in having the view change into the dayList view when on mobile. The default view is currently month but when setting this to defaultView: listDay as a property of the plugin I get the following error:
spec.class is not a constructor
I am using version 2.7.2 with the correct style sheets from a CDN. I am most interested in having my calendar display similar to the calendar found at https://fullcalendar.io/docs/list_view/intro/
Here is what my code looks like to generate my calendar.
$('#calendar').fullCalendar({
defaultView: 'listDay',
eventColor: '#9ADCC6',
eventTextColor: '#000',
header: {
left: 'title',
center: '',
right: 'today prev, next',
},
displayEventEnd: true,
buttonIcons: {
prev: 'left-single-arrow',
},
eventClick: function(event, jsEvent, view){
$('.myModal3 .title').text(event.title);
$('.myModal3 .date').text(event.start.format('MMM Do YYYY # h:mm:ss a'));
$('.myModal3 .modal-body').text(event.desc);
$('.myModal3 .modal-body').append(" <a href='"+event.link+"' target='_blank'>Learn More</a>");
$('.myModal3').css('display','block');
$('.myModal3.fade').css('opacity', '1');
},
events: function(start, end, timezone, callback) {
$.ajax({
url: '/events-iu-rss/calendar.asp',
data: {
start: start.unix(),
end: end.unix()
},
success: function(doc) {
var events = [];
// e = key, a = value
$(doc).find('event').each(function(e, a) {
var time = $(a).find('start-date-time').text();
//Wed, 16 Sep 2015 10:00:00 EDT
var endTime = $(a).find('end-date-time').text();
var formatEndTime = moment(endTime).format();
var formatTime = moment(time).format();
//console.log(a);
//console.log(formatTime.substr(11));
//console.log(formatEndTime.substr(11));
html = $.parseHTML( $(a).find('description').text() );
//stripping out first 11 characters of formatTime and formatEndTime, comparing the two times, and setting allDay value based on result
if((formatTime.substr(11))==(formatEndTime.substr(11))){
events.push({
title: $(a).find('summary').text(),
link: $(a).find('event-url').text(),
start: formatTime,
end: formatEndTime,
allDay: true,
desc: $($.parseHTML( $(a).find('description').text() )).html()
});
}
else{
events.push({
title: $(a).find('summary').text(),
link: $(a).find('event-url').text(),
start: formatTime,
end: formatEndTime,
allDay: false,
desc: $($.parseHTML( $(a).find('description').text() )).html()
});
}
});
callback(events);
}
});
}
});

Add event to every day if the day is empty

To better understand my question, take a look at the JSFiddle Example.
Basically there are tree kinds of unique items on the calendar that are all day events: Today, Completed, and Incomplete days. I need to figure a way to populate days that don't have anything on them (Today, or Incomplete), in this case they would be populated with "Completed". How can I figure out what these days are?
Also any way to limit the calendar to a set months range? For instance Quarter 1 would be Dec 1st to Mar 31st.
//Calendar
$(document).ready(function() {
// Figure out todays date and provide link to enter data
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
// Staff Data Calendar
$('#calendar-staff').fullCalendar({
header: {
left: '',
center: 'title',
},
businessHours: true, // display business hours
handleWindowResize: true, // responsive layout
editable: false,
events: [
// red areas where no events can be dropped
{
title: 'No Data',
start: '2015-02-03',
url: '#',
color: '#E64C65'
},
{
title: 'No Data',
start: '2015-02-17',
url: '#',
color: '#E64C65'
},
{
// Display Today
title: 'Enter Data for Today',
url: 'staffing_data_edit.html',
color: '#5E9EF3',
start: new Date(y, m, d)
}
]
});
});
You can use and apply a custom check on a event dayRender Click here for reference
Or you can use event eventAfterAllRender which call after the calendar is ready to draw. you can use a loop and check the empty days.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2018-10-25',
navLinks: true, // can click day/week names to navigate views
selectable: false,
selectHelper: true,
select: function(start, end) {
},
dayRender: function(date, cell )
{
console.log(date);
console.log(cell);
},
eventRender: function(event, element, view) {
},
eventAfterAllRender: function(view)
{
if (view.name == "month") {
var allEvents = $('#calendar').fullCalendar('clientEvents');
for (var index in allEvents) {
var event = allEvents[index];
}
}
},
eventClick: function(event) {
return false;
},
loading: function(bool) {
//$('#loading').toggle(bool);
},
timezone: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
eventLimitTex: 'More shifts',
events: eventsJson
});

Creating events on multiple calendars with FullCalendar.js

I am using the FullCalendar javascript library on my web site to display a calendar for each employee side-by-side. The calendar displays the Day view so it's easy to see everyones schedule for the day.
I have all of the calendars displaying properly side-by-side (each in their own div).
My problem is, when creating a new event by clicking on the calendar, the event always gets created on the last calendar on the page instead of the actual calendar you click on. I have a feeling it has to do with closure in the select callback function.
/*
* Setup calendars for each sales person
*/
var d = $.fullCalendar.parseDate($("#requested_date").val());
//employee id numbers (each employee has own calendar)
var employees = new Array(445,123,999,444);
for(i=0;i<employees.length;i++)
{
var employeeId = employees[i];
//clear any prevoius calendar info
$('#calendar_' + employeeId).html("");
calendar[employeeId] = $('#calendar_' + employeeId).fullCalendar({
header: {
left: '',
center: '',
right: ''
},
year: d.getFullYear(),
month: d.getMonth(),
date: d.getDate(),
defaultView: 'agendaDay',
minTime: 7,
maxTime: 19,
height: 650,
editable: true,
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
calendar[employeeId].fullCalendar('renderEvent',
{
title: "This Estimate",
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
calendar[employeeId].fullCalendar('unselect');
},
events: {
url: 'calendar/'+employees[employeeId],
type: 'POST',
data: {
'personId': employees[employeeId],
'ci_csrf_token': wp_csr_value
},
error: function() {
alert('there was an error while fetching events!');
}
}
});
}
Thanks
when you select a calendar employeesId is equal to 444 so it render event on the last calendar try this:
select: function(start, end, allDay , jsEvent ,view) {
$(view.element).parent().parent().fullCalendar('renderEvent',
{
title: "This Estimate",
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
$(view.element).parent().parent().fullCalendar('unselect');
}

Categories