Is there any possibility of only getting the selected event by user click and not the events already populated in fullcalendar?
I looked into documentations but couldn't find much help there.
Though, I understand I can get all events by:
$("#calendar").fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array
But I don't want this. And I am of-course using select.
The other notable thing here is I want this value in another JS file. so,
eventClick: function (selectedEvent) {
//selectedEvent.id
//selectedEvent.
}
won't actually work for my case.
Here's how my config of fullCalendar looks like:
$("#calendar").fullCalendar({
weekends: false,
defaultView: 'agendaWeek',
slotDuration: '00:30', // hours/minutes
allDaySlot: false,
header: {
left: 'today prev,next',
center: 'title',
right: ''
},
height: "auto",
contentHeight: 600,
events: [
{
title : 'event1',
start : '2017-05-01T12:30:00'
},
{
title : 'event2',
start : '2017-05-09T12:30:00',
end : '2010-05-09T13:30:00'
},
{
title : 'event3',
start : '2010-01-09T12:30:00',
allDay : false // will make the time show
}
],
businessHours: [ // specify an array instead
{
dow: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
start: '08:00', // 8am
end: '18:00' // 6pm
},
{
dow: [ 4, 5 ], // Thursday, Friday
start: '10:00', // 10am
end: '16:00' // 4pm
}
],
dayRender: function( date, cell ) {
alert('Clicked on: ' + date);
alert('Coordinates: ' + cell);
// alert('Current view: ' + view.name);
},
selectable: true,
selectConstraint: "businessHours",
select: function() { ... },
})
Try to use eventClick:
eventClick: function (selectedEvent) {
//selectedEvent.id
//selectedEvent.title
}
Related
https://codepen.io/ziobit/pen/mdLaXGB
Fullcalendar 5.11.3 timeGridWeek.
Nothing fancy, but I did change the starting/ending time of the day.
All the events DO NOT EVEN touch/overlap with the start/end day.
Why the 2PM row (last one) is so tall? It looks like it's printing the whole hours without showing them.
Maybe it's a "feature", but if there is a way to avoid this, I would be happy :)
Right now, this is how the slots are defined:
slotMinTime: "08:00:00",
slotMaxTime: "15:00:00",
I also tried
slotMinTime: "08:00:00",
slotMaxTime: "14:59:59",
to no avail
Set the property expandRows to true :
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
allDaySlot: false,
initialView: 'timeGridWeek',
validRange: function(nowDate) {
return {
start: '2022-10-01',
end: '2022-11-15'
};
},
eventClick: function(info) {
alert('Event ID: ' + info.event.id);
},
expandRows: true,
slotMinTime: "08:00:00",
slotMaxTime: "15:00:00",
events: [
{
id: 10,
url: 'www.google.com',
title: 'cavallo a muzzo',
start: '2022-10-15 10:00',
end: '2022-10-15 11:00',
},
{
id: 11,
title: `salti acrobatici all'indietro`,
start: '2022-10-15 10:15',
end: '2022-10-15 11:15',
},
{
id: 12,
title: `tuffi carpiati tripli`,
start: '2022-10-14 10:15',
end: '2022-10-14 12:00',
}
]
});
calendar.render();
<link href="https://cdn.jsdelivr.net/npm/fullcalendar#5.11.3/main.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.11.3/main.min.js"></script>
<div id='calendar'></div>
I have added events to my calendar from two sources. One source is a json object and other is a google calendar. Now, I want to make events from google calendar render as background events (nothing should happen if user clicks on it) and for json events I need to perform some action when user clicks on it.
This is my code:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
googleCalendarApiKey: 'AIzaSyACMTvM6xtGLSgkyLZqKw2t4chXf-tw8u8',
plugins: ['dayGrid', 'timeGrid', 'list', 'interaction', 'bootstrap', 'rrule', 'moment', 'googleCalendar'],
themeSystem: 'bootstrap',
timeZone: 'Asia/Colombo',
height: 'auto',
fixedWeekCount: false,
slotDuration: '00:15:00',
slotLabelInterval: '01:00:00',
navLinks: true,
nowIndicator: true,
selectable: true,
selectMirror: true,
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [1, 2, 3, 4, 5, 6], // Monday - saturday
startTime: '09:00', // a start time
endTime: '16:00', // an end time
},
views: {
listDay: {
buttonText: 'Todays events'
},
listWeek: {
buttonText: 'This week events'
},
listMonth: {
buttonText: 'This month events'
}
},
footer: {
center: 'listDay listWeek listMonth'
},
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventSources: [
// your event source
{
events: {!!$ce!!
},
color: 'blue',
editable: true
},
{
googleCalendarId: 'en.lk#holiday#group.v.calendar.google.com',
rendering: 'background',
color: 'yellow',
editable: false
}
],
select: function(info) {
alert('selected ' + info.startStr + ' to ' + info.endStr);
}
/* #can('isManager')
events: 'https://fullcalendar.io/demo-events.json'
#endcan */
});
calendar.render();
});
<div class="container-fluid mt--7">
<div class="row">
<div class="col-xl-12 mb-5 mb-xl-0">
<div class="card bg-white shadow">
<div class="card-body">
<div id="calendar" style="height: 800px;"></div>
</div>
</div>
</div>
</div>
</div>
But my google calendar events don't show as background events.
I try to add ids for each event sources like below and it makes my entire calendar disappear:
eventSources: [
// your event source
{
id='a',
events:{!! $ce !!},
color: 'blue',
editable:true
},
{
id='b',
googleCalendarId: 'en.lk#holiday#group.v.calendar.google.com',
rendering: 'background',
color: 'yellow',
editable:false
}
],
Now I need at least a way to identify events from each source separately.
I also tried
info.event.source
and
info.event.source.id
and even
info.event.color
to use as my identifier, but info.event.source shows as an object and info.source.id, info.source.color show as undefined properties
also this is how I pass JSON to my laravel view from controller'
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\DB;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* #return void
*/
public function __construct()
{
$this->middleware('auth');
}
/**
* Show the application dashboard.
*
* #return \Illuminate\View\View
*/
public function index()
{
$calender_events = DB::table('calender_events')->get();
$ce = $calender_events->toJson();
return view('dashboard', compact('ce'));
}
}
Please help.
I found answer my self,
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
googleCalendarApiKey: 'AIzaSyACMTvM6xtGLSgkyLZqKw2t4chXf-tw8u8',
plugins: [ 'dayGrid', 'timeGrid', 'list','interaction','bootstrap','rrule','moment','googleCalendar' ],
themeSystem: 'bootstrap',
timeZone: 'Asia/Colombo',
height: 'auto',
fixedWeekCount:false,
slotDuration: '00:15:00',
slotLabelInterval:'01:00:00',
navLinks:true,
nowIndicator: true,
selectable: true,
selectMirror:true,
slotLabelFormat:{
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
},
businessHours: {
// days of week. an array of zero-based day of week integers (0=Sunday)
daysOfWeek: [ 1, 2, 3, 4, 5, 6 ], // Monday - saturday
startTime: '09:00', // a start time
endTime: '16:00', // an end time
},
views: {
listDay: { buttonText: 'Todays events' },
listWeek: { buttonText: 'This week events' },
listMonth: { buttonText: 'This month events' }
},
footer:{
center: 'listDay listWeek listMonth'
},
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventSources: [
// your event source
{
events:{!! $ce !!},
id:'personal',
},
{
googleCalendarId: 'en.lk#holiday#group.v.calendar.google.com',
id:'google',
}
],
eventClick: function(info) {
info.jsEvent.preventDefault(); // don't let the browser navigate
if(info.event.source.id=='google'){
alert('Event: google ');
}else{
alert('Event: personal ');
}
},
});
calendar.render();
});
</script>
I just missed a comma near
googleCalendarId: 'en.lk#my#group.v.calendar.google.com',
id:'google',
and
events:{!! $ce !!},
id:'personal',
and for background rendering , full-calendar event source object doesn't have option "rendering" (only single events can render in background)
anyway thanks for your help!.
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);
},
});
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
});
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');
}