I am working on a calendar .I have used fullcalendar.js to implement this.Now i want to display a popup like google calendar.I have used the code given below.Here the popup dialog will appear only in the center.I want to show it in the position of clicked event.Please give me a solution.
var calendar = $('#datepicker');
calendar.fullCalendar
({
defaultView: 'agendaWeek',
defaultEventMinutes: 60,
aspectRatio: 1.5,
dayClick: function(date, allDay, jsEvent, view)
{
if(eventEdit)
{
$('.ui-dialog').hide();
eventEdit = false;
}
if(jsEvent.title == undefined)
{
var createEvent = prompt('Event Title:','',{
buttons: {
Ok: true,
Cancel: false
}
});
}
else
{
var createEvent = prompt('Event Title:', jsEvent.title, {
buttons:
{
Ok: true,
Cancel: false
}
});
}
if (createEvent)
{
jsEvent.title = createEvent;
calendar.fullCalendar('renderEvent', { title: jsEvent.title, start: date, allDay: false, editable: true}, true );
}
eventEdit = true;
},
eventClick: function(calEvent, jsEvent, view)
{
if(eventEdit)
{
$('.ui-dialog').hide();
eventEdit = false;
}
var timing = $('.fc-event-time').html();
var dialog = $('<p class="event" align="justify">Event:'+calEvent.title+'<br/>Timing:'+timing+'</p>').dialog
({
buttons:
{
"Edit Event": function()
{
dialog.dialog('close');
var editEvent = prompt('Event Title:', calEvent.title, {
buttons:
{
Ok: true,
Cancel: false
}
});
if (editEvent)
{
calEvent.title = editEvent;
calendar.fullCalendar('updateEvent',calEvent);
}
},
"Delete Event": function()
{
calendar.fullCalendar('removeEvents', calEvent._id);
dialog.dialog('close');
}
}
});
eventEdit = true;
},
header:
{
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
}
});
Related
So i have this calender. You can see below. When the page is first loaded i populate the 'events' propertie of the calender which works fine. What i am having problem with is updateing the 'events' propertie inside the 'viewrender' eventcallback. Is that possible.
Iam using fullcalender version 3.9.
I tried inside the viewrender to set .... this.setevents. But it dont seem to work
$("#request_calender").fullCalendar({
eventOverlap: true,
selectable: true,
views: {
listDay: {
buttonText: 'Custom View',
},
agendaWeek: {
columnFormat: 'ddd D/M'
}
},
slotLabelFormat: 'H:mm',
customButtons: {
toggleWeekends: {
text: 'show weekends',
click: function() {
toggleWeekends();
},
}
},
header: {
left: "prev,next today toggleWeekends unBooked",
center: "title",
right: "agendaDay,agendaWeek,month,listWeek"
},
weekends: false,
weekNumbers: true,
defaultView: 'agendaWeek',
select: function(startDate, endDate) {
start_date = startDate.format();
end_date = endDate.format();
new_request(start_date, end_date);
},
events: calender_array,
timeFormat: 'H(:mm)',
eventRender: function(e, t) {
//some code here
},
eventClick: function(event, jsEvent, view) {
console.log("event:", event);
request_id = event['request_id'];
request_details(request_id);
},
viewRender: function(view, element) {
//HERE I WANT TO GET DATA VIA A API AND PUSH TO EVENTS
if (view.name == 'listDay') {
showCustomView();
}
}
});
I have been getting an error when I want to add an event on fullcalendar, my code is correct because the console detects the day I click on it.
I looked at the topics that dealt with the same error but none of them allowed me to solve this error.
Except that an error occurs:
console
And here is my code :
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'fr',
editable: true,
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
events: 'http://127.0.0.1:8000/calendar',
displayEventTime: false,
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Nom événement :');
if (title) {
var start = new Date().toISOString().slice(0, 10);
var end = new Date().toISOString().slice(0, 10);
$.ajax({
url: 'http://127.0.0.1:8000/calendarAjax',
data: {
title: title,
start: start,
end: end,
type: 'add',
},
type: 'POST',
success: function(donnees) {
calendar.fullCalendar('renderEvent', {
id: donnees.id,
title: title,
start: start,
end: end,
allDay: allDay
}, true);
calendar.fullCalendar('unselect');
}
});
}
},
});
calendar.on('dateClick', function(info) {
console.log('clicked on ' + info.dateStr);
});
calendar.render();
});
</script>
Thank you.
I've been using an older version of fullcalendar and am having trouble recreating my calendars in the current version of fullCalendar.
I have seen the documentation and understand the extendedProp created in the event object, but I'm having trouble recreating this action from a JSON result of events.
Old fullCalendar v3.9
function DoCalendar() {
var URX = document.getElementById('url').value;
var URL = AppUrl + "JSON/GetCalendar/" + URX;
$('#Calendar').fullCalendar("destroy");
$('#Calendar').fullCalendar("render");
$('#Calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'basicWeek,month'
},
defaultView: 'month',
//defaultDate:
height: 'auto',
fixedWeekCount: false,
allDay: false,
allDaySlot: false,
displayEventTime: false,
navLinks: false,
eventLimit: false,
events: { url: URL },
eventColor: 'yellow',
eventTextColor: 'black',
eventRender: function (event, element) {
element.find('.fc-title').html(event.title);
event.eventColor = event.color;
$(element).popover({
title: event.start,
content: event.popover,
trigger: 'hover',
placement: 'auto',
html: true,
container: 'body'
});
}
})
New fullCalendar v5
function TestCalendar() {
var calendarEl = document.getElementById('calendario');
var teamId = document.getElementById('teamId').innerText;
var eventsURL = "/api/Calendar/GetTeamCalendar?id=" + teamId;
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: {
url: eventsURL,
error: function () {
$('#script-warning').show();
}
},
eventColor: 'yellow',
eventTextColor: 'black',
eventClick: function (info) {
alert('Event: ' + info.event.extendedProp);
},
eventRender: function (event, element) {
console.log(event.extendedProp);
}
});
calendar.render();
}
The current JSON result
[{"id":"436969","title":"Practice","start":"2020-10-31T22:29:00","end":"2020-10-31T22:40:00","someField":"the field"},
{"id":"955138","title":"Practice","start":"2020-10-31T03:15:00","end":"2020-10-31T04:15:00","someField":"the field"},
{"id":"985289","title":"Practice","start":"2020-11-02T17:37:00","end":"2020-11-02T17:42:00","someField":"the field"]
eventClick: function (info) {
alert('Event: ' + info.event.someField);
}
continues to return undefined
Any help is appreciated
According to documentation here,
https://fullcalendar.io/docs/event-object
You can get those details in object as below. it works for me.
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [{
"id": "436969", "title": "Practice", "start": "2020-10-31T22:29:00", "end": "2020-10-31T22:40:00", "someField": "the field"
},
{ "id": "955138", "title": "Practice", "start": "2020-10-31T03:15:00", "end": "2020-10-31T04:15:00", "someField": "the field" },
{ "id": "985289", "title": "Practice", "start": "2020-11-02T17:37:00", "end": "2020-11-02T17:42:00", "someField": "the field" }],
eventColor: 'yellow',
eventTextColor: 'black',
eventClick: function (info) {
alert('Event: ' + info.event.extendedProps["someField"]);
},
eventRender: function (event, element) {
console.log(event.extendedProp);
}
});
calendar.render();
});
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.2/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.2/main.css" rel="stylesheet"/>
<div id='calendar'></div>
I need to manually resize the event in fullcalendar without the code editable=true, because I have added a dropdown inside the event and
to work its click I suppose prevent the editable property(editable=false). Now the dropdown is working but the resize property been disappeared. Even I tried the property resizable(resizable=true). How can I bring both the codes?
sample code
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,agendaFourDay'
},
views: {
agendaFourDay: {
type: 'agenda',
duration: { days: 4 },
buttonText: '4 day'
},
},
defaultView: viewDefault,
//minTime: '07:00:00',
//maxTime: '21:00:00',
allDaySlot: false,
eventClick: updateEvent,
selectable: true,
selectHelper: true,
select: selectDate,
editable: false,
resizable: true,
events: "JsonResponse.ashx?eids=" + eIds + "&searchText=" + searchText,
//events: {
// url: 'JsonResponse.ashx',
// type: 'POST',
// data: {
// eIds: $('#hdnCustomerIds').val()
// },
// error: function () {
// alert('there was an error while fetching events!');
// }
//},
defaultDate: dateDefault,
eventDrop: eventDropped,
eventResize: eventResized,
eventRender: function (event, element, view) {
debugger;
// event.stopPropagation();
$(element).find('.fc-title').prepend('' + event.customerid + ',');
$(element).find('.fc-title').html('<select class="dropdown" style="color:black";" onchange="OnchangeEventStatus(this,'+event.id+')"><option >Volvo</option><option value="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option></select>');
$(element).find('.dropdown').click(function (e) {
e.stopImmediatePropagation(); //stop click event, add deleted click for anchor link
});
$(element).find('.delete-event-link').click(function (e) {
e.stopImmediatePropagation(); //stop click event, add deleted click for anchor link
window.top.location.href = "/Sr_App/Customer_Profile.aspx?CustomerId=" + event.customerid;
});
//$(element).find('.fc-title').prepend('' + event.customerid + ',');
element.qtip({
content: {
text: qTipText(event.start, event.end, event.description),
title: '<strong>' + event.title + '</strong>'
},
position: {
my: 'bottom left',
at: 'top right'
},
style: { classes: 'qtip-shadow qtip-rounded' }
});
}
});
i got the solution, just add the property editable: false for fullCalendar
$('#calendar').fullCalendar({
selectable: true,
editable: false,
events: "JsonResponse.ashx?eids=" + eIds + "&searchText=" + searchText,
......
....
});
I'm having 2 weird issues with my popovers shown here in fiddle
After I have selected a day (in fullcalendar) and the popover shows, I click the day again to hide the popover, then I click again in the same day to show again, but no popover!. It's after I click to show, hide, then click to show again that I'm having issues.
When I click on an eventLimitClick event inside a day (April 20th in fiddle), then click on the day (April 20th). The popover hides after I click the day, but then doesn't show any popover for the day like it should.
Here is some of the logic, but please refer to the fiddle link above for working code.
var $calPopOver;
$('#fullcalendar').fullCalendar({
header: {
left: 'prev,next', //today',
center: 'title',
right: ''
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
eventLimit: 1,
events: function(start, end, timezone, callback) {
$.ajax({
url: '/ManageSpaces/GetDiaryEvents/',
dataType: 'json',
data: {
start: start.format(),
end: end.format(),
id: $("#HiddenYogaSpaceId").val()
},
success: function(doc) {
var events = [];
$(doc).each(function() {
events.push({
title: "1 Event", //$(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
},
eventLimitText: function(numberOfEvents) {
return numberOfEvents + " Events";
},
eventLimitClick: function(cellInfo, jsEvent) {
$(cellInfo.dayEl).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function() {
return $("#events-popover-head").html();
},
content: function() {
return $("#events-popover-content").html();
}
});
//$(cellInfo.dayEl).popover('toggle');
if ($calPopOver) {
$calPopOver.popover('destroy');
}
$calPopOver = $(cellInfo.dayEl).popover('show');
},
eventClick: function(calEvent, jsEvent, view) { //function (data, event, view) {
//var s = cellInfo.segs;
$("#eventDetails.collapse").collapse('toggle');
if ($calPopOver)
$calPopOver.popover('destroy');
},
dayClick: function(data, event, view) {
$dayClickedDate = data.format();
$(this).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function() {
return $("#day-popover-head").html();
},
content: function() {
return $("#day-popover-content").html();
}
});
//$(this).popover('toggle');
if ($calPopOver) {
$calPopOver.popover('destroy');
}
$calPopOver = $(this).popover('show');
}
});
Maybe you can look into these bootstrap examples. If you can manage to get a copy of the examples, it's simple a copy and paste scenario IMO.
http://getbootstrap.com/javascript/
Search for "Popovers popover.js" on this page and scroll a bit down for the examples.