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
});
});
Related
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.
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
I want to show on the calendar, that what dates are free dates in the year. For these, i want to set a red background.
My problem is, that with this code, it gives the red background to all the dates.
I am using this in the dayRender event.
var unnep_napok =
[
"2019-01-12",
"2019-01-15"
];
$('#calendar').fullCalendar({
events: valami,
lang: 'hu',
dayClick: function(event) {
$(cell).removeClass('ui-widget-content');
$(cell).addClass('holiday');
$(this).css('background-color', 'green');
},
defaultView: 'month',
contentHeight: 'auto',
slotEventOverlap: false,
eventRender: function(eventObj, $el) {
$el.popover({
title: ' ',
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
},
dayRender: function (date, cell) {
for(i = 0; i < unnep_napok.length; i++ )
{
cell.css("background-color", "red");
}
}
});
Update with compare:
dayRender: function (date, cell) {
for(i = 0; i < unnep_napok.length; i++ )
{
if(date == unnep_napok[i] )
{
cell.css("background-color", "red");
}
}
}
Update 2, formatting array elements:
dayRender: function (date, cell)
{
for(i = 0; i < unnep_napok.length; i++ )
{
var datum = unnep_napok[i].moment.format('yyyy-mm-dd');
if(date.getDate() == datum )
{
cell.css("background-color", "red");
}
}
}
Following your update, there are still some problems which could be resolved by reading the documentation (and my earlier comments) more carefully:
1) I didn't give you the literal values to use in the "format" command. Did you read the documentation fully? As you can see, the correct format would be YYYY-MM-DD (big letters not small letters).
2) unnep_napok[i].moment.format ...this is not how you create a momentJS object. I would expect your browser gave an error in the console about this.
3) But anyway 2) is not important really, because as I mentioned in my last comment, it's the date value which you need to format ... your unnep_napok values are already strings!!
4) date.getDate() .. I don't know where you got this from?? MomentJS does not document any such function.
This should work for you:
dayRender: function (date, cell)
{
for(i = 0; i < unnep_napok.length; i++ )
{
if(date.format('YYYY-MM-DD') == unnep_napok[i])
{
cell.css("background-color", "red");
}
}
}
A running example based on ADyson's answer. I have also covered popover example for a quick start.
.popover works this way $(element).popover and doesn't work using element.popover
Running example: https://jsfiddle.net/alifaraze/mr53d7nz/8/
HTML
<div id="calendar"></div>
Script
$(document).ready(function() {
var unnep_napok = [
"2019-01-23",
"2019-01-25"
];
$('#calendar').fullCalendar({
events: [{
id: 1,
title: 'Full Day Event',
start: '2019-01-02',
end: '2019-01-03',
description: 'A full day event description'
},
{
id: 2,
title: 'Whole Week Event',
start: '2019-01-06',
end: '2019-01-10',
description: 'Whole week event description'
}
// more events here
],
eventRender: function(event, element) {
$(element).popover({
title: function() {
return "<B>" + event.title + "</B>";
},
placement: 'auto',
html: true,
trigger: 'click',
animation: 'false',
content: function() {
return "<h4>"+ event.description+"</h4>"
},
container: 'body'
});
},
dayRender: function(date, cell) {
for (i = 0; i < unnep_napok.length; i++) {
if (date.format('YYYY-MM-DD') == unnep_napok[i]) {
cell.css("background-color", "red");
}
}
}
});
})
I've implemented zabuto calendar in my project. Here is the screen shot:
.
I want the color of date cell to be changed when clicked. Here is a part of my code:
$(document).ready(function () {
$("#my-calendar").zabuto_calendar({
cell_border: true,
today: false,
show_days: true,
weekstartson: 0,
nav_icon: {
prev: '<i class="fa fa-chevron-circle-left"></i>',
next: '<i class="fa fa-chevron-circle-right"></i>'
}
});
});
Here is onClick code.
myDateFunction(this.id);
function myDateFunction(id) {
var date = $("#" + id).data("date");
document.getElementById("#" + id).style.color = "blue";
}
$("#my-calendar").zabuto_calendar({
action: function () {
return myDateFunction(this.id, false);
},
legend: [
{type: "text", label: "Special event", badge: "00"},
{type: "block", label: "Regular event"}
]
});
But this isn't working. How can I fix it?
Old post, but I've made a custom Zabuto calendar.
It's untested and lot's of features are missing but you should give it a peek:
$("#my-calendar").zabuto_calendar({
language: "fr",
year: 2015,
month: 1,
show_previous: 1,
show_next: 2,
// show_reminder: true,
// show_today: false,
// show_days: true,
// weekstartson: 0,
// nav_icon: {
// prev: '<i class="fa fa-chevron-circle-left"></i>',
// next: '<i class="fa fa-chevron-circle-right"></i>'
// },
callbacks: {
on_cell_double_clicked: function() {
return cellDoubleClicked(this);
},
on_cell_clicked: function() {
return cellClicked(this);
},
on_nav_clicked: function() {
return navClicked(this);
},
on_event_clicked: function() {
return eventClicked(this);
}
},
events: {
local: events_array,
ajax: {
url: "" // load ajax json events here...
}
},
legend: [
{label: "Rendez-vous", type: "appointment"},
{label: "Evenement A", type: "eventtype2"},
{label: "Evenement B", type: "eventtype3"},
{label: "<span class='fa fa-bell-o'></span> Rappel", type: "reminder"}
]
});
http://jsfiddle.net/n2gkm4d9/
(try double-click in day wrappers, simple-click on events)
Now with:
init calendar with local json + ajax data
call public methods (to add just one event at a time for example)
add event through a modal (not the modal included in zabuto calendar, I've removed it)
show a list of events of a day
...
It's only few hours of work, there's lot of features to add and things to do to make it stable but it's usable. ;-)
Look carefully to the code... there's much more than the fiddle show actually:
I think you should add a public method really easily to change the color of the cell.
Cheers
Fro
go through this http://zabuto.com/dev/calendar/examples/action.html. it contains your answer.
I am using FullCalendar.js in my website. I have set events from backend. I want to change look of the day which has an event. In other words I need some sort of class where I have "fc-day" and an event in it.
My code looks like and you see it on jsFiddle:
$('#calendar').fullCalendar({
events: [{
title: 'event1',
start: '2013-01-01'
}, {
title: 'event2',
start: '2013-12-05',
end: '2013-12-07'
}, {
title: 'event3',
start: '2013-12-15'
}]
})
You can use eventRender() property of Full Canendar.
This works for me with fullcalendar v2:
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2014-04-01'
},
{
title : 'event2',
start : '2014-04-05',
},
{
title : 'event3',
start : '2014-04-15'
}
],
eventRender: function (event, element, view) {
// like that
var dateString = moment(event.start).format('YYYY-MM-DD');
$('#calendar').find('.fc-day-number[data-date="' + dateString + '"]').css('background-color', '#FAA732');
}
});
Note: You will need Moment library for this.
I could not find a desired property or method to use in the documentation of Fullcalendar.
I came up with a kind of a messy solution: adding a class by data-attributes:
function addClassByDate(date) {
var dataAttr = getDataAttr(date);
$("[data-date='" + dataAttr + "']").addClass("hasEvent");
}
function getDataAttr(date) {
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate().toString().length === 2 ? date.getDate() : "0" + date.getDate());
};
It works fine for the settings, you've provided in your question.
The working example could be found here: http://jsfiddle.net/6NShN/9/
This is how I did it to give background color to each and every events.
JS FIDDLE DEMO
events: [
{
title: 'Test1',
start: new Date(2014, 2, 28, 12, 0),
end: new Date(2014, 2, 30, 12, 0),
backgroundColor: '#80ACED',
},
{
title: 'Test2',
start: new Date(2014, 2, 14, 3, 55),
end: new Date(2014, 2, 21, 12, 0),
backgroundColor: '#80ACED',
},
{
title: 'Test3',
start: new Date(2014, 2, 2, 12, 0),
end: new Date(2014, 2, 2, 12, 0),
backgroundColor: '#E82525',
}
]
Hope this helps.
Refer : http://arshaw.com/fullcalendar/docs/event_data/Event_Object/
Finally this is how it worked for me take a look at this
jsfiddle
$('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2014-04-01'
},
{
title : 'event2',
start : '2014-04-05',
},
{
title : 'event3',
start : '2014-04-15'
}
],
eventRender: function (event, element, view) {
// like that
var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FAA732');
}
});
weswesweswes is nearly correct view.element should be view.el
eventRender: function (event, element, view) {
var dateString = moment(event.start).format('YYYY-MM-DD');
view.el.find('.fc-day[data-date="' + dateString + '"]').addClass('fc-has-event');
}
None of these will work for >=v2.0, since fullCalendar started using moment.js for date formatting.
The following worked for me (passed to fullCalendar initialization function):
eventRender: function (event, element, view) {
var dateString = moment(event.start).format('YYYY-MM-DD');
view.element.find('.fc-day[data-date="' + dateString + '"]').addClass('fc-has-event');
}
You can add class on base of the fullcalender .fc-event class its not direct approach but its works.
Fiddle demo
$(document).ready(function (){
$(".fc-event").addClass("myclass");
});
Heres another Fiddle JS FIDDLE
Just by adding
textColor: 'white',
backgroundColor:'purple'
You can change the style
JS code:
$('#calendar').fullCalendar({
eventSources: [
// your event source
{
events: [
{
title : 'event1',
start : '2013-01-01'
},
{
title : 'event2',
start : '2013-12-05',
end : '2013-12-07'
},
{
title : 'event3',
start : '2013-12-15'
}],
textColor: 'white',
backgroundColor:'purple'
}
// any other event sources...
]
});
Fullcalendar v2, for agendaWeek view:
eventRender: function(event, element, view ){
if(view.name=='agendaWeek') {
var weekdays = new Array('sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat');
var eventweekday = $.fullCalendar.moment(event.start).format('d');
$('.fc-'+weekdays[eventweekday]).css('background-color', '#FFC');
}
},
Highlights all days with events.
Had this same issue and had found a bunch of solutions for older versions of FullCalendar (which seemed a bit hacky anyway). However, in v5 you can use eventDidMount and traverse up the DOM to the day cell.
JS Code:
eventDidMount: function(info) {
$(info.el).closest(".fc-daygrid-day").addClass("has-event");
}