Why are my full calendar event does not curl up. If I have more than three events should curl up and show at the bottom of the "more events". FullCalendar downloaded from the repository adesigns / calendar-bundle. I have this:
I need this:
This is my code.I added a piece of code at the end of the function but is not working:
$(document).ready(function () {
$(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar-holder').fullCalendar({
header: {
left: 'prev, next',
center: 'title',
right: 'month, agendaWeek, agendaDay, add_event'
},
lazyFetching: true,
timeFormat: {
// for agendaWeek and agendaDay
agenda: 'H:mm', // 5:00 - 6:30
// for all other views
'': 'H:mm' // 7p
},
eventSources: [
{
url: Routing.generate('fullcalendar_loader'),
type: 'POST',
// A way to add custom filters to your event listeners
data: {
},
error: function () {
//alert('There was an error while fetching Google Calendar!');
}
}
],
monthNames: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
monthNamesShort: ['Sty', 'Luty', 'Marz', 'Kwie', 'Maj', 'Czer', 'Lip', 'Sier', 'Wrze', 'Paź', 'Lis', 'Gru'],
dayNames: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
dayNamesShort: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
buttonText: {
month: 'Miesiąc',
week: 'Tydzień',
day: 'Dzień'
},
eventLimit: true,
views: {
agenda: {
eventLimit: 3
}
},
});
});
So, I never heard of the plugin, I googled for the documentations, I opened the documentation and this was the first page I found that resembled your problem: https://fullcalendar.io/docs/display/eventLimit/
You need to add an event limit to your options that limit the amount of events on a day. Like so:
$('#calendar').fullCalendar({
eventLimit: true, // for all non-agenda views
views: {
agenda: {
eventLimit: 6 // adjust to 6 only for agendaWeek/agendaDay
}
}
});
If this does not solve your problem, please post the javascript code you are using. If this did solve your problem, please read the docs of this plugin before asking questions about it here.
Related
I want to create a calendar with scheduled event, so I fetched the data from my database into controller, process them into the format as it needed, and return an Json array of event object.However, the calendar do not show the event with daysofWeek.
//events is an array of primary key, which will later been used to retrieve data from database in controller
var a = JSON.stringify(events);
$(function () {
$.post('/SchedulingManager/SetVariable',
{ key: a, value: "Test" }, function (result) {
GenerateCalendar(result);
});
});
}));
function GenerateCalendar(array) {
$('#calendar'). fullCalendar({
//theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
},
timeFormat: 'hh:mm a',
selectable: true,
defaultView: 'month',
editable: true,
allDaySlot: true,
selectable: true,
slotMinutes: 15,
events:array,
})
}
})();
This is the JSON array that is return from the controller
However, the calendar only shows the event with fix date, but not the events that is with daysofWeek property.( And the time displayed is wrong too for another case).But , when I copy the exactly same code
{ dow: '[1,2,3,4,5]', title: 'OFA-0001 : (test event log)', start: ' 10:00:00 ', end: '11:00:00 ' }
the event is showned .
Event is shown if I create the array in view
No weekly event is showed if the object with daysofWeek is in the array that is retrieved from controller
Can anynone help me with this I am stuck.Thank you.
I am using FullCalendar 4 and i have setup the Calendar Object in my script
function createBookingCalendar() {
var calendarEl = document.getElementById('bookingCalendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'en-gb', // the initial locale
timeZone: 'Europe/London',
plugins: ['interaction', 'list', 'timeGrid'],
header: {
left: 'prev,next today',
center: 'title',
right: 'listDay,listWeek,timeGridDay,timeGridWeek, dayGridWeek,DayGridMonth'
},
businessHours: [ // specify an array instead
{
daysOfWeek: [1, 2, 3, 4, 5], // Monday - Friday
startTime: '09:00', // 9am
endTime: '18:00' // 6pm
}, {
daysOfWeek: [6], // Saturday
startTime: '10:00', // 10am
endTime: '16:00' // 4pm
}
],
hiddenDays: [7],
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: {
buttonText: 'Goto Day View'
},
listWeek: {
buttonText: 'Goto Week View'
},
timeGridDay: {
buttonText: 'Goto Time Grid Day View'
},
timeGridWeek: {
buttonText: 'Goto Time Grid Week View'
}
},
slotDuration: '02:00', // 2 hours
defaultView: 'listWeek',
defaultDate: Date.now(),
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
eventSources: [
// CAD Solutions Event Source (Remote Database)
{
url: '../php/getBookings.php',
method: 'GET',
failure: function () {
$.confirm({
theme: 'Modern',
icon: 'fas fa-exclamation-triangle',
title: 'Error',
content: '<p>There was an error fetching the bookings from our database, we appologise for the inconvenience.</p><p class="text-muted">This error has been logged with our engineers.</p><small>Error 0x86451 (Fetch Bookings Database Error)</small>',
type: 'red',
columnClass: 'col-md-6 col-md-offset-3',
buttons: {
close: {
text: 'Close.',
action: function () {
//reset flag and recall the function.
}
}
}
});
}
}
],
eventRender: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.title,
content: 'asdadasdqweqweqweqweqwasssd',
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
noEventsMessage: '<div class="panel panel-primary" style="height: 245px;width: 654px;margin:0 auto;padding:10px;margin-top:30px;"><div class="panel-heading"><h4><i class="fas fa-info-circle"></i> There are no bookings for this day.</h4></div><div class="panel-body"><p>There are no bookings saved for this date, you can add a booking to this day using the buttons below, or select a different date.</p><p class="text-muted">You can create a booking for this date as all timeslots are available.</small></div><div class="panel-footer"><a class="btn btn-primary" href="javascript:void(0);" id="addBooking" style="color:#fff;"><i class="fas fa-calendar-plus"></i> Create Booking For This Date.</a></div></div><div class="divider"> </div><div class="divider"> </div><div class="divider"> </div>',
eventClick: function (info) {
//Prevent Default Behaviour.
info.jsEvent.preventDefault();
$.confirm({
theme: 'Modern',
icon: 'fas fa-info-circle',
title: 'Selected Booking Information',
content: '<ul class="list-group list-group-flush" id="assetContent"><li class="list-group-item">Booking Company Name: ' + info.event.extendedProps.companyName + '</li><li class="list-group-item">Booking Date: ' + info.event.start + '</li><li class="list-group-item">Booking Slot: ' + info.event.startTime + ' - ' + info.event.endTime + '</li></ul>',
type: 'blue',
columnClass: 'col-md-6 col-md-offset-3',
buttons: {
close: {
text: 'Close.',
action: function () {
//reset flag and recall the function.
}
}
}
});
}
});
calendar.render();
}
When i have eventRender setup in the code the calendar stops fetching events from my source and it shows the eventSources>failure dialog that i added in the function.
When i remove the eventRender part of the script the calendar object renders perfectly and I am able to see all the events from my database.
Could anybody point out where I am going wrong with the coding?
would really like to get the eventRender part working so i can change the background color of events that are set, also in addition, how would i add in events of my own after the source has fetched the events from the server? I want to do this so I can fill in time slots that are missing in the calendar so the user can select a free slot to create a booking.
Many Thanks
Edit I took out the tool tip code I found in the full calendar docs and replaced it with ui tool tip instead, that is now working. What is the procedure for adding in my own events?
For some reason, Fullcalendar is showing events that start past midnight as e.g. '24:15'. We want it to show '00:15'. I think this is a new issue, because we have had the calendar for a year, and this is the first I'm hearing of it. But I can't find anything about how to solve it.
We are using fullcalendar v4.2.0. I did not write the original code, but I'm fairly familiar with it. We fetch events using a REST API, and we're using ServiceNow. When using the 12-hour format (am/pm), it shows 12a15. I tried changing the eventTimeFormat, but had no luck. This is part of the client script:
/* Calendar */
c.funcs.loadCalendar = function() {
var calendarEl = document.getElementById('calendar');
c.calendar = new FullCalendar.Calendar(calendarEl, {
contentHeight: 'auto',
plugins: [ 'dayGrid','timeGrid', 'list'],
header: {
left: 'prev next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek,listMonth'
},
buttonText: {
dayGridMonth: 'Month',
timeGridWeek: 'Week',
timeGridDay: 'Day',
listWeek: 'List Week',
listMonth: 'List Month',
today: 'Today'
},
editable: false,
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
hour12: false
},
eventOverlap: false,
firstDay: 1,
weekNumbers: true,
// Scripted REST API which sends Start and End date-time of current view as parameters and gets current events.
//events: '/api/tnas/fullcalendar_fetch_data',
events: function(info, successCallback, failureCallback) {
$http({
method: 'GET',
url: '/api/tnas/fullcalendar_fetch_data',
headers: {
'X-UserToken': window.g_ck // Authorization
},
params: {
systems: c.vars.selectedSystems.map(function(system) { return system.value; }).toString(),
excludedTypes: c.vars.types.filter(function(type) {return !type.checked}).map(function(type) { if(!type.checked) return type.type }).toString(),
start: info.start,
end: info.end
}
}).success(function(data, status) {
successCallback(data.result.events);
}).error(function(data, status) {failureCallback(data)});
},
loading: function(isLoading) {
c.vars.calendarIsLoading = isLoading;
$scope.$evalAsync();
},
// When event is rendered and put into the DOM, add a tippy.js tooltip to that element.
eventRender: function(info) {
tippy(info.el, {
theme: 'light-border',
content: info.event.extendedProps.tooltipContent,
arrow: true,
animation: 'fade',
flip: false,
boundary: 'window'
});
},
eventClick: function(info){
info.jsEvent.preventDefault();
var p = $scope.data.page_id || 'form';
var url = '/sp?id=' + p + '&table=' + info.event.extendedProps.table + '&sys_id=' + info.event.id + '&view=sp';
window.open(url, "_blank");
},
navLinks: true,
navLinkDayClick: function(date, jsEvent) {
//c.calendar.gotoDate(date);
c.calendar.changeView('timeGridDay', date);
}
});
c.calendar.render();
}
/* Calendar End */
JSON of the event:
title: "Metro IN-Applikasjoner - test"
number: "SREL0004789"
start: "2020-04-15 00:15:00"
end: "2020-04-16 14:00:00"
downtime_start: ""
downtime_end: ""
className: "SystemRelease"
type: "system_release"
table: "release"
id: "4a393c2b298c54903eaa786081948e7c"
state: "New"
state_reason: null
downtime_type: "Soft"
color: "rgb(163, 222, 255, 0.5)"
tooltipContent: "<div style='text-align:left; font-size:1.5em'><p>Metro IN-Applikasjoner - test</p><p><strong>Start:</strong> 00:15, 15. apr 20</p><p><strong>End:</strong> 14:00, 16. apr 20</p></div>"
Hopefully someone has experienced the same issue before. Any help is greatly appreciated!
Fixed: Replacing the hour12 property with hourCycle: 'h23' in eventTimeFormat did the trick!
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
hourCycle: 'h23'
},
I have a FullCalendar List view.
All of the entries in the view will always be "all day" events. Therefore I don't really need the "all-day" that appears in the left column. Is there a way to remove this from the list?
$(document).ready(
function() {
var calendarEl = document.getElementById('date_list');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'list' ],
defaultView: 'listThirtyDay',
height: 'auto',
views: {
listThirtyDay: {
type: 'list',
duration: { days: 30 },
buttonText: '30 days'
},
listDay: { buttonText: 'Day' },
listWeek: { buttonText: 'Week' }
},
header: {
left: 'prev,next',
center: 'title',
right: 'listDay,listWeek,listThirtyDay',
},
time: false,
eventSources: [
{
url: $('.KeyDatesURL').val()
}
]
});
calendar.render();
}
);
If you inspect the rendered HTML elements using your browser's Developer Tools you'll see the time text in a List view is kept inside a HTML element with the class "fc-list-item-time".
Therefore you can set a simple CSS rule to hide it:
.fc-list-item-time {
display:none;
}
Live demo: https://codepen.io/ADyson82/pen/GRJByop
You can use this:
allDaySlot: false
See this link here - https://fullcalendar.io/docs/allDaySlot
also you can refer this:
How to remove allDay from view in fullcalender JS?
In the 'Month' view of the fullcalendar.io I would like to display the current month only, with the current month events. However, currently what is being showed is a month counting from the current date.
E.g: If today's date was 2016-20-03...
- What fullcalendar display: From: 2016-20-03 To: 2016-19-04
- What I would like to display: From 2016-01-03 To: 2016-31-03
After reading the documentation and looking up around I couldn't find any variable or set up for the fullcalendar to achieve this so I thing that I will have to modify the fullcalendar.js
Has someone already done this?
View
$('#' + engineerId).fullCalendar({
header: false,
views: {
plainMonth: {
type: 'basic',
duration: { days: 31 },
buttonText: 'Month'
},
plainWeek: {
type: 'basic',
duration: { days: 7 },
buttonText: 'Week'
}
},
firstDay: 1,
dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
defaultView: 'plainWeek',
theme: true,
viewRender: function (view, element) {
$('#CalendarViewObject').val(view.name);
viewName = view.name;
},
aspectRatio: ratio,
editable: true,
eventLimit: false, // allow "more" link when too many events
events: {
startEditable: false,
durationEditable: false,
url: window.location.href.toString().split(window.location.host)[1] + '/GetEmployeeEvents',
type: 'POST',
data: function () { // a function that returns an object
$("[id^=qtip-]").empty();
$("[id^=qtip-]").remove();
return {
serviceAreaId: serviceAreaId,
employeeId: engineerId,
calendarViewObject: $('#CalendarViewObject').val()
};
},
error: function () {
alert('there was an error while fetching events!');
}
},...
Controller
public JsonResult GetEmployeeEvents(DateTime start, DateTime end, string queueName, string employeeId, string calendarViewObject)
The 'start' and 'end' dates are set up by the fullcalendar.io, and those dates are the ones that I would like to change.
Thank you very much in advance,
Alvykun
After some more research in the fullcalendar documentation, I ended up by setting the following:
$(\'.calendarClass\').fullCalendar(\'gotoDate\',new Date(y, m, 1));
This did the trick and works!