I update my app with the new version of fullcalendar and I would like to copy/paste the events I drag-and-drop.
I set the editable option to true in my planning object and the drag-and-drop does work, but I wish it would copy the event instead of deplacing it.
I am currently trying to edit the event eventDragStart in order to create a clone of my event.
var jsonEvents = <?php echo json_encode($arrayEvenements); ?>;
var planning = {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
defaultView: 'timeGridWeek',
allDaySlot: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
editable: true,
events : jsonEvents,
eventClick : function goTo(info){
// Some link to my event page
},
eventDragStart : function cloneEvent(info) {
// Where I want the magic to happen I guess ???
var evenement = info.event;
console.log(evenement);
},
eventDragStop : function upadateEvent(info) {
var evenement = info.event;
console.log(info)
}
}
var calendarEl = $('#calendar1')[0]
var calendar = new FullCalendar.Calendar(calendarEl, planning)
calendar.render()
I want a clone of my drag-and-dropped event
I have a single drag-and-dropped event I am moving around for no reason
For cloning an event I believe it's too late trying to do anything in eventDragStart, the event has already started moving at this point.
If you aren't bothered about events being dragged and resized and only want to clone the event when dragging, the solution is quite simple. Just treat each event as an external event. With this approach, editable should not be true.
let containerEl = document.getElementById("calendar");
let calendarEl = document.getElementById("calendar");
new Draggable(containerEl, {
itemSelector: ".fc-event",
eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});
var calendar = new Calendar(calendarEl, {
plugins: ["dayGrid", "interaction"],
defaultView: "dayGridMonth",
events: [
{
title: "Test 1",
start: "2019-04-01"
},
{
title: "Test 2",
start: "2019-04-03",
end: "2019-04-05"
},
{
title: "Test 3",
start: "2019-04-22",
end: "2019-04-25"
},
{
title: "Test 4",
start: "2019-04-19"
}
]
});
calendar.render();
Working example
If however, you do need to be able to drag and resize events you need some way of distinguishing between a regular drag and an external drag. In v3 I used to copy events when the control key was held down and the user started to drag. There appears to be a problem with this in v4, I plan to look into this further but in the meantime, I have a working example when holding the shift key.
If you drag without holding shift the event is moved, if you drag while holding shift the event is cloned.
let shiftIsPressed = false;
function setEventsCopyable(isCopyable) {
shiftIsPressed = !shiftIsPressed;
calendar.setOption("droppable", isCopyable);
calendar.setOption("editable", !isCopyable);
}
document.addEventListener("keydown", event => {
if (event.keyCode === 16 && !shiftIsPressed) {
setEventsCopyable(true);
}
});
document.addEventListener("keyup", event => {
if (shiftIsPressed) {
setEventsCopyable(false);
}
});
let containerEl = document.getElementById("calendar");
let calendarEl = document.getElementById("calendar");
new Draggable(containerEl, {
itemSelector: ".fc-event",
eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});
var calendar = new Calendar(calendarEl, {
plugins: ["dayGrid", "interaction"],
defaultView: "dayGridMonth",
// Determines whether the events on the calendar can be modified.
editable: true,
// Determines if external draggable elements can be dropped onto the calendar.
dropAccept(el) {
return shiftIsPressed;
},
events: [
{
title: "Test 1",
start: "2019-04-01"
},
{
title: "Test 2",
start: "2019-04-03",
end: "2019-04-05"
},
{
title: "Test 3",
start: "2019-04-22",
end: "2019-04-25"
},
{
title: "Test 4",
start: "2019-04-19"
}
]
});
calendar.render();
Working example
Related
I am using FullCalendar v5.10.0
Is there any feature in full calendar that efficiently allows event creation only in a particular time slots i.e. Only within "availableForMeeting" time slots.
As shown in below image I want to restrict users to create events only in green highlighted time slots i.e. "availableForMeeting" time slots as defined in code below.
Expected behavior -
According to current code it does not allow users to create events outside defined business hours i.e. should not allow to create events in grayed out time slots.
In short behavior should be similar to above business hours feature for all time slots which are outside of green highlighted "availableForMeeting" time slots.
Code -
<div id='calendar'></div>
<div>
Locales:
<select id='locale-selector'></select>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var initialLocaleCode = 'en';
var localeSelectorEl = document.getElementById('locale-selector');
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
selectable: true,
unselectAuto: true,
nowIndicator: true,
editable: true,
locale: initialLocaleCode,
selectConstraint: "businessHours",
eventConstraint: "businessHours",
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [
{
"title": "Meeting",
"start": "2021-10-21T13:00:00",
"end": "2021-10-21T13:40:00",
"constraint": "availableForMeeting",
"overlap": false,
"color": "#257e4a"
},
{
"groupId": "availableForMeeting",
"start": "2021-10-18T10:00:00",
"end": "2021-10-18T17:00:00",
"display": "background"
},
{
"groupId": "availableForMeeting",
"start": "2021-10-21T12:00:00",
"end": "2021-10-21T15:00:00",
"display": "background"
}
],
select: function (selectionInfo) {
var selectionStart = moment(selectionInfo.start);
var today = moment(); // passing moment nothing defaults to today
if (selectionStart < today) {
calendar.unselect()
}
else {
var eventName = prompt('Enter Title');
if (eventName) {
var allDay = !selectionInfo.start.hasTime && !selectionInfo.end.hasTime;
var newEvent = new Object();
newEvent.title = eventName;
newEvent.start = selectionInfo.start;
newEvent.end = selectionInfo.end;
newEvent.allDay = false;
newEvent.stick = true;
newEvent.constraint = 'availableForMeeting';
calendar.addEvent(newEvent);
}
}
},
selectOverlap: function (event) {
return event.rendering === 'background';
}
});
calendar.setOption('businessHours',
[
{
daysOfWeek: [1, 2, 3, 4, 5],
startTime: '08:00',
endTime: '12:00'
},
{
daysOfWeek: [1, 2, 3, 4, 5],
startTime: '13:00',
endTime: '17:00'
}
]
);
calendar.render();
// build the locale selector's options
calendar.getAvailableLocaleCodes().forEach(function (localeCode) {
var optionEl = document.createElement('option');
optionEl.value = localeCode;
optionEl.selected = localeCode == initialLocaleCode;
optionEl.innerText = localeCode;
localeSelectorEl.appendChild(optionEl);
});
// when the selected option changes, dynamically change the calendar option
localeSelectorEl.addEventListener('change', function () {
if (this.value) {
calendar.setOption('locale', this.value);
}
});
});
</script>
This topic follows this one about using fullcalendar :
how to set duration for external events in fullcalendar
Now I'm trying to use the resources.
For now it's just testing so I used the following code:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: [ 'resourceTimeGrid' ],
timeZone: 'UTC',
defaultView: 'resourceTimeGridFourDay',
datesAboveResources: true,
header: {
left: 'prev,next',
center: 'title',
right: 'resourceTimeGridDay,resourceTimeGridFourDay'
},
views: {
resourceTimeGridFourDay: {
type: 'resourceTimeGrid',
duration: { days: 4 },
buttonText: '4 days'
}
},
resources: [
{ id: 'a', title: 'Room A' },
{ id: 'b', title: 'Room B' }
],
events: 'https://fullcalendar.io/demo-events.json?with-resources=2'
});
calendar.render();
});
I'm inside a Symfony project.
In terms of Javascript calls I had this :
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.1.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/interaction#4.1.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/daygrid#4.1.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/timegrid#4.1.0/main.min.js"></script>
So I added these 2 calls:
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-common#4.1.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-timegrid#4.1.0/main.min.js"></script>
All of this was copy / pasted from the demo pages.
Now when I load my page I have this error message and i don't understand why :
Uncaught TypeError: Cannot read property 'addEventListener' of null
It seems the error is triggered here :
// Event Delegation
// ----------------------------------------------------------------------------------------------------------------
function listenBySelector(container, eventType, selector, handler) {
function realHandler(ev) {
var matchedChild = elementClosest(ev.target, selector);
if (matchedChild) {
handler.call(matchedChild, ev, matchedChild);
}
}
container.addEventListener(eventType, realHandler);
return function () {
container.removeEventListener(eventType, realHandler);
};
}
on this part :
container.addEventListener(eventType, realHandler);
What do you think may cause this issue ?
A javascript missinh maybe ?
The error was due to a bad id in the div supposed to contain the calendar...
Everything is actually working fine and I was able to combine dragging events + using resources. The full code is :
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/core#4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/interaction#4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/daygrid#4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/timegrid#4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-common#4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-daygrid#4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fullcalendar/resource-timegrid#4.4.0/main.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var calendarEl = document.getElementById('calendar-holder');
var containerEl = document.getElementById('external-events');
// initialize the external events
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
var json_event = eventEl.getAttribute("data-event");
var event_array = JSON.parse(json_event);
var event_duration = event_array['duration'];
var event_title = event_array['title'];
var event_color = event_array['color'];
return {
title: event_title, //eventEl.innerText,
duration: event_duration,
backgroundColor: event_color,
};
}
});
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'resourceTimeGrid' ],
timeZone: 'UTC',
defaultView: 'resourceTimeGridFourDay',
datesAboveResources: true,
header: {
left: 'prev,next',
center: 'title',
right: 'resourceTimeGridDay,resourceTimeGridFourDay'
},
views: {
resourceTimeGridFourDay: {
type: 'resourceTimeGrid',
duration: { days: 4 },
buttonText: '4 days'
}
},
resources: [
{ id: 'a', title: 'Room A' },
{ id: 'b', title: 'Room B' }
],
events: 'https://fullcalendar.io/demo-events.json?with-resources=2'
});
calendar.render();
});
</script>
Thank you ADyson once again, for taking the time to help me !
Using fullcalendar library, I would like to display the start time for each empty cell on my calendar (empty cells are the one marked with a red cross or red dots in the below screenshot, I modified a bit the aspect of the calendar):
So my expected output is a calendar were timeslots become buttons, when you click you start the process of booking a 30 minutes appointment which would start at the written time (the green slot is an hover effect in the following screenshot):
I can't find any easy way to do it through after reading fullcalendar documentation : https://fullcalendar.io/docs
Subsidiary question, I can't find the way to change the style of the empty cell in the CSS. Can't manage to select the elements through my Chrome console.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
columnHeaderHtml: function(date) {
if (date.getUTCDay() === 0) {
var date_day = "Lundi";
}
if (date.getUTCDay() === 1) {
var date_day = "Mardi";
}
if (date.getUTCDay() === 2) {
var date_day = "Mercredi";
}
if (date.getUTCDay() === 3) {
var date_day = "Jeudi";
}
if (date.getUTCDay() === 4) {
var date_day = "Vendredi";
}
if (date.getUTCDay() === 5) {
var date_day = "Samedi";
}
if (date.getUTCDay() === 6) {
var date_day = "Dimanche";
}
if(date.getMonth() === 0)
{
var date_month = "Jan";
}
if(date.getMonth() === 1)
{
var date_month = "Fev";
}
if(date.getMonth() === 2)
{
var date_month = "Mar";
}
if(date.getMonth() === 3)
{
var date_month = "Avr";
}
if(date.getMonth() === 4)
{
var date_month = "Mai";
}
if(date.getMonth() === 5)
{
var date_month = "Juin";
}
if(date.getMonth() === 6)
{
var date_month = "Juil";
}
if(date.getMonth() === 7)
{
var date_month = "Août";
}
if(date.getMonth() === 8)
{
var date_month = "Sept";
}
if(date.getMonth() === 9)
{
var date_month = "Oct";
}
if(date.getMonth() === 10)
{
var date_month = "Nov";
}
if(date.getMonth() === 11)
{
var date_month = "Dec";
}
var day_num = date.getDate();
return '<b>'+date_day+'</b><br><small>'+day_num+" "+date_month+"</small>";
},
plugins: [ 'interaction', 'dayGrid', 'list', 'googleCalendar','timeGrid' ],
selectable: true,
defaultView: 'timeGridFourDay',
views: {
timeGridFourDay: {
type: 'timeGrid',
duration: { days: 4 },
buttonText: '4 day'
}
},
slotLabelFormat:{
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: true,
meridiem: 'short'
},
locale:'fr',
header: {
left: 'prev today',
right: 'next'
},
validRange: {
start: '2019-08-05',
end: '2019-09-05'
},
allDaySlot:false,
firstDay:1,
minTime:"08:00:00",
maxTime:"20:00:00",
displayEventTime: true, // don't show the time column in list view
// THIS KEY WON'T WORK IN PRODUCTION!!!
// To make your own Google API key, follow the directions here:
// http://fullcalendar.io/docs/google_calendar/
googleCalendarApiKey: 'AIzaSyAL9K2UqkCVfV0n81mDW0iEpOJSwcklfsY',
// US Holidays
events: 'fr.fr#holiday#group.v.calendar.google.com',
eventClick: function(arg) {
arg.jsEvent.preventDefault() // don't navigate in main tab
console.log(arg);
},
select: function(info) {
console.log(info)
},
loading: function(bool) {
},
eventSources: [
{
googleCalendarId: 'contact#vetorino.com',
className: "gcalEvent"
}],
displayEventEnd:false,
events:[
{ // this object will be "parsed" into an Event Object
start: '2019-08-05 12:30:00', // a property!
end: '2019-08-05 14:00:00', // a property! ** see important note below about 'e6d' **
overlap: true,
backgroundColor:"#F7F7F7",
textColor:"#979797",
classNames:"closed",
}],
contentHeight: "auto",
});
calendar.render();
});
So far as shown in my previous screenshot I just managed to have empty cells, the only cells where you find some information are cells containing events.
As discussed in the comments above, there is no single element in the fullCalendar HTML which represents a specific "cell" or "slot" in the timeGrid view. The grid you can see on screen is actually an illusion created by layering multiple tables on top of each other.
So to meet your requirement for a user to be able to select a 20-minute appointment in a free slot, I can see two main options. The first is what I would normally recommend, using the standard fullCalendar functionality. The second is more like what you are asking for, but I think it over-complicates things.
1) This option simply sets the calendar with a slot duration of 20 minutes, and then has code to stop the user from selecting a longer period of time (they cannot select a shorter period, due to the slotDuration setting. This means that they can click on any empty space once and it will know to create an event of the correct length in that location. The user is not allowed to select any slot where an event already exists. (P.S. I expect in reality you will need to collect more data before adding events, but for the demonstration it adds an event instantly.)
document.addEventListener("DOMContentLoaded", function() {
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById("calendar");
var calendar = new Calendar(calendarEl, {
plugins: ["timeGrid", "interaction"],
header: {
left: "prev,next today",
center: "title",
right: "timeGridFourDay"
},
defaultView: "timeGridFourDay",
views: {
timeGridFourDay: {
type: "timeGrid",
duration: { days: 4 },
buttonText: "4 day"
}
},
slotLabelFormat: {
hour: "numeric",
minute: "2-digit",
omitZeroMinute: true,
meridiem: "short"
},
allDaySlot: false,
firstDay: 1,
minTime: "08:00:00",
maxTime: "20:00:00",
contentHeight: "auto",
slotDuration: "00:20:00",
selectable: true,
select: function(info) {
//console.log(info);
calendar.addEvent({ "title": "Test", start: info.start, end: info.end })
calendar.unselect();
},
selectOverlap: false,
selectAllow: function(selectInfo) {
var stM = moment(selectInfo.start);
var enM = moment(selectInfo.end);
var diff = enM.diff(stM, "minutes");
console.log(diff);
if (diff > 20)
{
return false;
}
return true;
},
events: [
{ "title": "Existing event", "start": "2019-08-08 10:00", "end": "2019-08-08 10:20"},
{ "title": "Existing event", "start": "2019-08-08 13:20", "end": "2019-08-08 13:40"},
]
});
calendar.render();
});
Demo: https://codepen.io/ADyson82/pen/aeqJQg
2) This option is closer to your desired UI (from your 2nd screenshot) but is a bit more complicated to achieve. I also, personally, think it leaves your calendar looking cluttered, and making it harder to see where the free and busy slots are, but ultimately it's up to you how you want to implement it. This works by adding a second event source, containing a list of all currently free slots. These are then used to display the start time of each free slot in the centre of it. They are coloured differently from the existing events (indicating a busy slot), so that it's a bit easier to tell the difference.
Of course, this requires you to use your server-side code to calculate all the currently free slots in your database and use that information to populate the second event source. (In the demo the free slot data is static, but of course that will not work in a real application.)
document.addEventListener("DOMContentLoaded", function() {
var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById("calendar");
var calendar = new Calendar(calendarEl, {
plugins: ["timeGrid", "interaction"],
header: {
left: "prev,next today",
center: "title",
right: "timeGridFourDay"
},
defaultView: "timeGridFourDay",
views: {
timeGridFourDay: {
type: "timeGrid",
duration: { days: 4 },
buttonText: "4 day"
}
},
slotLabelFormat: {
hour: "numeric",
minute: "2-digit",
omitZeroMinute: true,
meridiem: "short"
},
allDaySlot: false,
firstDay: 1,
minTime: "08:00:00",
maxTime: "20:00:00",
contentHeight: "auto",
slotDuration: "00:20:00",
displayEventTime: false,
eventClick: function(info) {
if (info.event.extendedProps.type == "free") {
calendar.addEvent({
title: "Test",
start: info.event.start,
end: info.event.end
});
info.event.remove(); //delete the "free slot" event
}
},
eventSources: [
{
id: "busy",
events: [
{
title: "Existing event",
start: "2019-08-08 10:00",
end: "2019-08-08 10:20"
},
{
title: "Existing event",
start: "2019-08-08 13:20",
end: "2019-08-08 13:40"
}
]
},
{
id: "free",
backgroundColor: "green",
events: [
{
title: "08:00",
start: "2019-08-08 08:00",
end: "2019-08-08 08:20",
type: "free"
},
{
title: "08:20",
start: "2019-08-08 08:20",
end: "2019-08-08 08:40",
type: "free"
},
{
title: "08:40",
start: "2019-08-08 08:40",
end: "2019-08-08 09:00",
type: "free"
},
{
title: "09:00",
start: "2019-08-08 09:00",
end: "2019-08-08 09:20",
type: "free"
},
{
title: "09:20",
start: "2019-08-08 09:20",
end: "2019-08-08 09:40",
type: "free"
},
{
title: "09:40",
start: "2019-08-08 09:40",
end: "2019-08-08 10:00",
type: "free"
},
{
title: "10:20",
start: "2019-08-08 10:20",
end: "2019-08-08 10:40",
type: "free"
},
{
title: "10:40",
start: "2019-08-08 10:40",
end: "2019-08-08 11:00",
type: "free"
},
]
}
]
});
calendar.render();
});
For this demo I only created handful of the "free" slots (because it was tedious to create them), but hopefully you can get the idea of how it would start to look with dozens of them all over the calendar. Of course again you can amend the CSS to your requirements.
Demo: https://codepen.io/ADyson82/pen/JgpNEX
(You can of course amend the CSS of this further to make it appear more like your desired look and feel.)
Addendum: Here's the OP's final version, for anyone who is interested in the end product - based on taking the above suggestions into consideration: https://codepen.io/hugo-trial/pen/rXdajv
I've got problem with my fullcalendar,but only on Mozilla Firefox browser.I want to add 2 events:
First on date 17.07 to 20.07 another on 18.07 to 22.07.
My browser in result show me first event on date 17.07 without end date and second correct result .I don't know why :/ in another browsers (chrome,opera) it's looks better.
$('.calendar').fullCalendar({
header: {
right: '',
center: '',
left: ''
},
firstDay: 1,
buttonIcons: {
prev: 'calendar__prev',
next: 'calendar__next'
},
theme: false,
selectable: true,
selectHelper: true,
editable: false,
events: [
],
viewRender: function (view) {
var calendarDate = $('.calendar').fullCalendar('getDate');
var calendarMonth = calendarDate.month();
//Set data attribute for header. This is used to switch header images using css
$('.calendar .fc-toolbar').attr('data-calendar-month', calendarMonth);
//Set title in page header
$('.content__title--calendar > h1').html(view.title);
},
eventClick: function (event, element) {
$('#edit-event input[value='+event.className+']').prop('checked', true);
$('#edit-event').modal('show');
$('.edit-event__id').val(event.id);
$('.title').val(event.title);
$('.description').val(event.description);
$('.start_date').val(event.start);
$('.stop_date').val(event.stop);
$('.user_full_name').val(event.author);
},
eventRender: function(event, element) {
startDate=event.start.toISOString().substring(0, 10);
stopDate=event.stop.substring(0, 10);
title = event.title + "<br />"+' [ '+startDate+' ]' + ' [ '+stopDate+' ] ';
element.popover({
title: title,
trigger: 'hover',
placement: 'auto',
container: 'body',
html: true
});
}
});
I've got my data from api and editing it on that function.
function getApiData(daysInMonth){
var api_url = $('input[name="apiUrl"]').val();
api_url = api_url+'/api/eventStart='+y+'-'+m+'-'+'01'+'&eventStop='+y+'-'+m+'-'+daysInMonth;
$.getJSON(api_url,function(result){
$.each(result.data,function(key,index){
bg = event_color(index.category_name)
if(index.category_name == "Holiday"){
title = index.category_name+' - '+index.user_name;
endDate=index.event_stop.substring(0, 10);
endTime=index.event_stop.substring(10, 19);
var datePlus1 = endDate.split('-');
datePlus1[2] = Number(datePlus1[2])+1;
if(datePlus1[2] > daysInMonth){
datePlus1[2] = '01';
datePlus1[1] = Number(datePlus1[1])+1;
if(datePlus1[1]<10){
end=datePlus1[0]+'-0'+datePlus1[1]+'-'+datePlus1[2];
}
else{
end=datePlus1[0]+'-'+datePlus1[1]+'-'+datePlus1[2];
}
}
else{
end=datePlus1[0]+'-'+datePlus1[1]+'-'+datePlus1[2];
}
$('.calendar').fullCalendar('renderEvent', {
id: index.id,
title: title,
start: index.event_start,
end: end,
stop: index.event_stop,
description:index.event_description,
author: index.user_full_name,
allDay: true,
className: bg,
}, true);
}
}
}
`
ok I solved the problem. Function must add '0' to value day if days < 10 becouse the date looks like this 2019-11-1 instead 2019-11-01.
Hi everyone I have events array, on click of day I want to show event details in another panel. I have array with array within array format, I am not getting how to render this to get all the details of event including sub array details on that clicked day. Please see if you can help me with this or can suggest something in it. Here is my code below.
$(window).load(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
eventRender: function(event, element, view) {
for (var i = 0; i <= event.products.length - 1; i++) {
element.append('<span>' + event.products[i].name + '<span>');
};
},
events: [{
title: 'EventName',
start: '2016-05-02',
products: [{
name: 'ProductName'
}]
}, {
title: 'Event',
start: '2016-05-03',
products: [{
name: 'ProductName1'
}, {
name: 'ProductName2'
}, {
name: 'ProductName3'
},]
}, {
title: 'EventName',
start: '2016-05-13',
products: [{
name: 'ProductName1'
}, {
name: 'ProductName2'
}]
}, {
title: 'Event',
start: '2016-05-15',
products: [{
name: 'ProductName'
}]
}, {
title: 'EventNAme',
start: '2016-05-21',
products: [{
name: 'ProductName1'
}, {
name: 'ProductName2'
}]
}, {
title: 'Event',
start: '2016-05-23',
products: [{
name: 'ProductName1'
}, {
name: 'ProductName2'
}]
}, {
title: 'Eventname',
start: '2016-05-25',
products: [{
name: 'ProductName'
}]
}, {
title: 'Event',
start: '2016-05-29',
products: [{
name: 'ProductName'
}]
}],
dayClick: function(date, allDay, jsEvent, view) {
console.log('date' + date.format('DD/MMM/YYYY') + "allDay" + allDay.title + "jsEvent" + jsEvent + "view" + view)
}
});
})
If you see I have events array and each event has products array, so whenever I click on date I want to show title, as well as product details like same name of product. Here is what I have tried so far with calendar.
So when I click on any day that has event the I want to show I dont want to show on click of events, I need whole day clickable right now according to below answer it shows only when clicked on event.
event title product_name
The code is too lengthy so I have created code pen please see if you can edit this, thank you in advance
DEMOTRIAL
Ahaa! Finally I found the solution to render events on dayClick. There is something called clientEvents object that allows us to fetch events inside any full calendar actions (say dayClick, eventClick etc) I used that fucntion to render my events, here is my working demo...
and the dayClick code which I was eagerly searching is below
dayClick: function(date, allDay, jsEvent, view) {
$('#calendar').fullCalendar('clientEvents', function(event) {
// match the event date with clicked date if true render clicked date events
if (moment(date).format('YYYY-MM-DD') == moment(event._start).format('YYYY-MM-DD')) {
// do your stuff here
console.log(event.title);
// if you have subarray i mean array within array then
console.log(event.subarray[0].yoursubarrayKey);
}
}
}
The event click is what you're looking for.
eventClick: function(calEvent, jsEvent, view) {
console.log('Event: ' + calEvent.title);
console.log('Event: ' + calEvent.products[0].name);
}
See updated codepen
This is how to loop all the products name:
for (var i = 0;i < calEvent.products.length;i++){
console.log('Event: ' + calEvent.products[i].name);
}
And to insert the properties inside the panel you do something like this:
eventClick: function(calEvent, jsEvent, view) {
// this is a little function to manipulate the dom
function insert(title, product){
var dom = $("#insert_here")
var template = '<tr><td class="o-box-name">'+product+'</td><td>'+title+'</td><td>Cancel</td></tr>'
dom.append(template);
};
// this is the loop
for (var i = 0;i < calEvent.products.length;i++){
//console.log('Event: ' + calEvent.products[i].name);
insert(calEvent.title, calEvent.products[i].name);
}
}
Another updated codepen
Click on may, 23th
$(document).ready(function(){
$('.fc-button-group').click(function() {
//write code here
});
});