I am working with fullcalendar. I want to limit the number of events created per day to 4 in week's view.
I have seen this link but it is not of much help
stackoverflow question
eventLimit options only limits the events displayed but I want to stop creating events once 6 events have been created per day in week's view.
Try this.
select: function( start, end, jsEvent, view) {
var eventCounter = 0;
$('#calendar').fullCalendar('clientEvents', function(event) {
if (start.format('YYYY-MM-DD') == event.start.format('YYYY-MM-DD')) {
eventCounter++;
}
});
if (eventCounter < 6) {
// Code to create event
}
}
This works for me locally.
Okay after digging deep and learning more about fullcalender, here is how i did it. it was very easy i must say. `
var event_count=0;// to count the number of events starting from zero
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-01-12',
editable: true,
selectable: true,
minTime: '09:00:00',
maxTime: '18:00:00',
columnFormat: 'dddd',
eventLimit: true,
select: function(start, end) {
var eventData = {
start: start,
end: end
};
event_count+=1;//if the control is inside this function increment eventcount
if(event_count<4){
//if the counter is less than four then do this
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
$('#calendar').fullCalendar('unselect');
}
},
eventClick: function(event){
$('#calendar').fullCalendar('removeEvents',event._id);
event_count-=event_count;//decrement event_count when event is removed
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
$('#view_calendar').on('shown.bs.modal', function () {
$("#calendar").fullCalendar('render');
});
})
`
Related
When user selects event type and no. of hours from dropdown then it should be added to the calendar. I have updated the event listener still no data is showing. Sorry if it seems a trivial question. i am new to web applications and a bit time strained.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
},
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
});
});
ok1.addEventListener('click',function() {
let date = moment($('#calendar').fullCalendar('getDate'));
let val = document.getElementById('inputGroupSelect02').value;
let desc=document.getElementById('nobh').toString();
$('#calendar').fullCalendar('renderEvent',
$('#calendar').fullCalendar({events: [{
start: date,
title: val,
description: desc
}]}),true);
},true);
Thanks #ADyson following worked:-
$('#calendar').fullCalendar('renderEvent', { start: date, title: val, description: desc }, true);
Im using FullCalendar jquery library for creating events.
The requirement here is to create recurring events every x days.
For example create an event that is recurring on each second Monday (every 14 days in this case).
Currently the library supports weekly or monthly recurring events.
How can I achieve this?
I think #CBroe is correct, you could achive this using your own logic.
To add events to the calendar you must first populate an array of events, this can then be bound to the calendars events property.
For example:
var events = getEvents();
$('#myCalendar').fullCalendar({
themeSystem: 'bootstrap3',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
weekNumbers: true,
weekends: false,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventStartEditable: false,
height: 'auto',
eventLimit: true, // allow "more" link when too many events
events: events,
viewRender: function (view, element) {
events = getEvents();
$('#myCalendar').fullCalendar('removeEvents');
$('#myCalendar').fullCalendar('addEventSource', events);
},
});
function getEvents(){
var events = [];
var arrayOfDates; //Populate dates at intervals of 14 days
$.each(arrayOfDates, function () {
var date = this;
//Create event
events.push({
title: 'myEvent',
start: date,
end: date,
allDay: true,
color: '#228B22',
stick: true
});
});
}
return events;
}
Well something like that anyway.. this should give you a good starting point
I'm using fullcalendar version 3.6.2 with some events.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
editable: true,
eventLimit: true, // allow "more" link when too many events
navLinks: true,
nextDayThreshold: '00:00:00', // 9am
events: [
{
title: 'Tesst tesst',
allDay: false,
start: '2017-11-12T08:00:00',
end: '2017-11-13T15:00:00'
},
{
title: 'Birthday Party',
start: '2017-11-19T10:00:00',
end: '2017-11-21T06:00:00'
},
{
title: 'All Day Event',
allDay:true,
start: TOMORROW,
end: TOMORROW
},
{
title: 'Long Event',
start: '2017-11-07T10:00:00',
end: '2017-11-10T06:00:00'
},
{
title: 'Conference',
start: '2017-11-26T10:00:00',
end: '2017-11-28T04:00:00'
},
{
title: 'Meeting',
allDay: true,
start: TODAY + 'T10:30:00',
end: TODAY + 'T12:30:00'
},
]
});
My plunk: demo
I want to make long events display in all-day event in agendaWeek/agendaDay like Allday event.
Any way to do this?
Thanks so much!
Had a similar problem, try this:
The eventDataTransform Is key here, this allows you to manipulate the data before it’s rendered on to the calendar.
In my example, because others that create events on our calendar frequently create multi-day events that then take up most of the screen in agendaDay view, I opted to reclassify these events as all day events which relocates them to the top of the view.
I’ve chosen to reclassify any event >=5 hours as an all day event.
It’s important to catch eventData.end == null as well!
Multi day events will need to be identified further as to those which need the end date redefining to midnight the following morning. This is useful where for example as multi-day event finishes at 1500hrs on the last day this will also be moved to the top as an all day event. Without this amendment the last day will be cut off. There’s some more info on this here: FullCalendar - Event spanning all day are one day too short
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: '',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
editable: false,
aspectRatio: 0.77,
eventDataTransform: function (eventData) {
var dur = eventData.end - eventData.start; //total event duration
if(dur >= 18000000 || eventData.end == null){ // 5 hours
eventData.allDay = true;
//eventData.end needs ammending to 00:00:00 of the next morning
if (dur > 86400000) {
var m = moment(eventData.end);
var roundDown = m.startOf('day');
var day2 = moment(roundDown).add(1, 'days')
eventData.end = day2.toString();
}
}
return(eventData);
},
});
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
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
});