How to get date and title on onclick title event in full calender.
following code is to display calender.
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'title',
center: 'agendaDay,agendaWeek,month',
right: 'prev,next today'
},
//other full calender code.
});
I have used following function to add data dynamically on full calender.
$(document).ready(function() {
var json = JSON.parse(getCalenderEventList());
for (var i = 0; i < json.length; i++) {
var a = json[i].title;
var b = json[i].start;
$('#calendar').fullCalendar('renderEvent', {
title: a,
start: b
});
}
});
Everything is working great. Now when I click on the title in full calender, I want to called a function. like..
function showDateAndTitle(date, title){
alert(date);
alert(title);
}
How should be done this? Can anyone help on this?
Thanks in advance.
You need to add the callback eventClick to the fullCalendar object like this:
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'title',
center: 'agendaDay,agendaWeek,month',
right: 'prev,next today'
},
eventClick: function(event, jsEvent, view) {
alert('Event: ' + event.title);
alert('start date event: ' + event.start._i);
}
});
ref: eventClick
Related
When i try to add external event to it i require date and time from the calendar how can i achieve that here is my code which i have worked over.
document.addEventListener('DOMContentLoaded', function () {
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable
//// the individual way to do it
var containerEl = document.getElementById('external-events-list');
var eventEls = Array.prototype.slice.call(
containerEl.querySelectorAll('.fc-event')
);
eventEls.forEach(function(eventEl) {
new Draggable(eventEl, {
eventData: {
title: eventEl.innerText.trim(),
}, // this allows things to be dropped onto the calendar
drop: function (arg) {
// is the "remove after drop" checkbox checked?
alert(arg);
}, // this allows things to be dropped onto the calendar
eventReceive: function (arg) {
// is the "remove after drop" checkbox checked?
alert(arg);
},
eventDrop: function (event, delta, revertFunc) {
//inner column movement drop so get start and call the ajax function......
console.log(event.start.format());
console.log(event.id);
var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
var end = event.end || event.start.clone().add(defaultDuration);
console.log('end is ' + end.format());
//alert(event.title + " was dropped on " + event.start.format());
}
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function (arg) {
// is the "remove after drop" checkbox checked?
if (document.getElementById('drop-remove').checked) {
// if so, remove the element from the "Draggable Events" list
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
}
},
eventDrop: function (info) {
alert(info.event.title + " was dropped on " + info.event.start.toISOString());
if (!confirm("Are you sure about this change?")) {
info.revert();
}
},
//eventRender: function (info) {
// console.log(info.event.extendedProps);
// // {description: "Lecture", department: "BioChemistry"}
//}
});
calendar.render();
});
i am trying to add event callback function in the new Draggable but to no use as event are not fired from it when i drag within the calendar then it fires back from new Calendar, so i require that after dragging event externally in the calendar i need to get date and time from it.
I am using full Calendar latest version and displayed events as hain data successfully. Now when I click on event I am displaying a pop-up containing the event information.
There is a button on pop-up using that I am changing value of that event in database and doing this through AJAX.
Now I want to change background color of that event on success of pop-up submit using AJAX.
How can I achieve that ?
This is code for full calendar
/* Full Calendar */
jQuery(document).ready(function() {
var currenturl=window.location.search;
if(currenturl=='?page=budget_calendar'){
var ajax_url=calendar_ajax_url.cal_lib;
}
jQuery('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
buttonText: {today: 'Today', month: 'Month', agendaWeek: 'Week', agendaDay: 'Day',listWeek:'list'},
lang: 'us',
refetch: false,
firstDay: 1,
eventLimit: 2, // allow "more" link when too many events
disableDragging: true,
eventRender: function(event, element) {
element.find('.fc-title').hide();
element.find('.fc-time').hide();
element.find('.fc-title').after(
jQuery("<div><i class='fa fa-money'></i>"+ event.type +" : <br>" + event.title + "</div>"+"<div></div>"+"<div>Amount :" + event.amount + "</div>")
);
element.css('border-color','#0040ff');
element.css('background-color',event.color);
element.click(function () {
var event_id=event.id;
var event_type=event.type;
jQuery.ajax({
type:'POST',
url:ajax_url+'/assets/lib/lib_calendar_ajax.php',
data:{event_type:event_type,event_id:event_id,action:'get_event_details'},
success:function(response){
var eventdata=jQuery.parseJSON(response);
if(event.type=='Expense'){
jQuery('#expenseModal').modal('show');
}
}
})
});
},
events:ajax_url+'/assets/lib/lib_upcoming_calendar.php',
});
});
And on popup button click
`$(document).on('click','#button_click',function(){
var orderid=$(this).data('eventid');
$.ajax({
type:'POST',
url:'ajax_responce.php',
data: {'orderid':orderid,action:'change_status'},
success:function(response){
if(response=='done'){
/* here i want to change background color of event which i have clicked */
}
}
});
});
I just resolved this issue.I just did by using :-
/* In calendar */
/* In calendar */
var temp='';
eventClick: function(event, element) {
var temp= $(this);
}
and
/* And jquery on button click */
$(document).on('click','#save',function(){
temp.css('background-color','red');
});
It is better to use refetch events in success of code like this
var calendar=$('#calendar').fullCalendar();
calendar.fullCalendar('refetchEvents');
I am building a calendar via FullCalendar.
I would like to display a small icon img for each day of the the current month. regardlees to any events. (lets say i dont have events at all).
i would like to use the DayRender function. if that possible
here is the impletetion of my calendar so far:
$(document).ready(function() {
var json_backgrundColor ={"1":"#f1f9ef","2":"#edf5f9","3":"#edf5f9","4":"#f7fafc","5":"#f7fafc","6":"#f7fafc","7":"#f7fafc","8":"#f7fafc","9":"#edf5f9","10":"#edf5f9","11":"#f7fafc","12":"#f7fafc","13":"#f7fafc","14":"#f7fafc","15":"#f7fafc","16":"#edf5f9","17":"#edf5f9","18":"#f7fafc","19":"#f7fafc","20":"#f7fafc","21":"#f7fafc","22":"#f7fafc","23":"#edf5f9","24":"#f1f9ef","25":"#ffdfdf","26":"#ffdfdf","27":"#f1f9ef","28":"#f1f9ef","29":"#f1f9ef","30":"#f1f9ef","31":"#f1f9ef"};
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
},
defaultView: 'month',
dayRender: function ( date, cell) {
var cellDate = date.format('D');
if(!cell.hasClass('fc-other-month')) {
cell.css('background-color', json_backgrundColor[cellDate]);
}else {
cell.css('background-color', '#ffffff');
}
},
});
});
https://jsfiddle.net/m53jbwx0/4/
anyone know how can i do that?
Do you need something like this?
dayRender: function ( date, cell) {
cell.prepend('<i class="fa fa-plane" aria-hidden="true"></i>');
}
https://jsfiddle.net/mnjsjs6p
I am trying to change the color of one specific to Red or Green when I right click it. At the moment, when I right click and change the color, it changes the color of all events, which is not what I want. I need that particular targetted event only.
.fc-event refers to all events but how do I denote a specific event.
All the events are being parsed via JSON object and presented on the calendar.
Here is what I have done so far, any help would be greatly appreciated :-
$(document).bind("contextmenu", function (event) {
event.preventDefault();
$(".custom-menu").data('event', $(this)).finish().toggle(100).
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
$(document).bind("mousedown", function(e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide(100);
}
});
// If the menu element is clicked
$("ul.custom-menu li").click(function() {
switch($(this).attr("data-action")) {
case "red":
var $event = $(".fc-event");
$event.css("background-color","red");
break;
case "green":
var $event = $(".fc-event");
$event.css("background-color","green");
break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide(100);
});
Here is the calender being displayed.
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: "events.php");
})
Any assistance on how this will be done would be appreciated.
Regards,
I´m using the full calendar plugin, so I load my data for the current month, but when I click previous, then next then previous again; my previous events get duplicated.
For example, if I had an event with id=1 in november, and I´m in december and I go to november; then I see my event with id=1 duplicated.
Here is my json:
[{"id":2024,"title":"titulo0","start":"2014-12-23 19:22:17","end":"2014-12-23 19:22:17","description":"descripcion0"}]
Here is how I load my calendar:
function loadEventos() {
var current_url = '';
var new_url = '';
$('#calendar').fullCalendar({
events: '/pushCombos/calendarioAction!getEventosMes.action?mes=' + 1,
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
eventClick: function(calEvent, jsEvent, view) {
calEvent.title = "CLICKED!";
console.log(moment(calEvent.end).format("YYYY-MM-DD"));
editarEvento(calEvent);
console.log(moment(calEvent.end).format("YYYY-MM-DD"));
$('#calendar').fullCalendar('updateEvent', calEvent);
}
});
}
and here is the code of my buttons:
$('.fc-button-group').children().eq(1).click(function(){
var date = $("#calendar").fullCalendar('getDate');
var month_int = moment(date).format("MM");
var year_int = moment(date).format("YYYY");
var events = {
url: '/pushCombos/calendarioAction!getEventosMes.action?mes=1',
data: {
month: month_int,
year: year_int
}
};
$('#calendar').fullCalendar('removeEventSource', events);
$('#calendar').fullCalendar('addEventSource', events);
});
When I edit an event and reload it; it reloads fine, but if I use the next and previous buttons, the events get duplicated.
Why is this happening??
Thanks in advance!
Try changing your events option to this:
events: {
url: '/pushCombos/calendarioAction!getEventosMes.action',
type: 'GET',
data: {
mes: 1
},
cache: false,
error: function (jqXHR, textStatus, errorThrow) { //whatever you want }
}
It seems that this plugin automatically does the post when you press the previous button that why it was duplicating the events.
Another weird thing I found is that the first day of the month and the last day of the month it sends to the server are wrong.