I'm trying to make events copy when I drag them into the calendar. I have managed to copy the event and write it to the database but until I reload the page the original is not shown. That is: Even if the information is copied, the event appears "moved" until you reload the page.
When dragging this happens (which is normal):
When you reload the page, it looks like this:
What I need is to always display like this, without reloading the page. It does not seem that the event has moved. This is necessary in case I want to copy the same event in several days, without having to reload the page.
The code:
document.addEventListener('DOMContentLoaded', function() {
var calendar = document.getElementById('calendar');
var calendarTodo = new FullCalendar.Calendar(calendar, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'myCustomButton dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
locale: 'es',
nowIndicator: true,
allDaySlot: false,
minTime: "08:00:00",
maxTime: "19:00:00",
height: 'auto',
columnHeaderFormat: {
weekday: 'long',
day: 'numeric',
omitCommas: true },
hiddenDays: [6,0],
slotEventOverlap: false,
defaultTimedEventDuration: '00:45',
slotDuration: '00:15:00',
slotLabelInterval: '00:45:00',
defaultDate: '<?php echo date('Y-m-d');?>',
defaultView: 'timeGridDay',
views: {
month: {
editable: true
}
},
eventDrop: function(info) {
if (!confirm("Se va a duplicar " + info.event.title + " al " + info.event.start.getDate() + " de " + monthNames[info.event.start.getMonth()] + ", ¿estás seguro?")) {
info.revert();
}else{
grabarDuplicado(info.event);
}
},
editable: false,
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false
},
slotLabelFormat: {
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false
},
customButtons: {
myCustomButton: {
text: 'Añadir festivo',
click: function() {
event.preventDefault();
window.open("./index.php?view=newholiday", "popupWindow", "width=600,height=600,scrollbars=yes");
}
}
},
eventLimit: true,
eventRender : function(info) {
const props = info.event.extendedProps,
rendering = info.event.rendering;
if(rendering == "background") {
$(info.el).html("<a href='./?view=editholiday&id="+info.event.id+"' style='color:#555'>"+info.event.title+"</a>");
}
},
events: <?php echo json_encode(array_merge((array)$thejson,(array)$dias_festivos)); ?>
});
calendarTodo.render();
});
function grabarDuplicado(event) {
var d = event.start;
var month = d.getMonth() + 1;
if(month <= 9)
month = '0'+month;
var day= d.getDate();
if(day <= 9)
day = '0'+day;
var fecha = d.getFullYear() + "-" + month + "-" + day;
var hora = (d.getHours()<10?'0':'') + d.getHours() + ":" + (d.getMinutes()<10?'0':'') + d.getMinutes();
var titulo = "";
if(event.extendedProps.paciente_id == 9){
titulo = event.title;
}
$.ajax({
type:"POST",
url:"./?action=addreservation",
data:{"pacient_id":event.extendedProps.paciente_id,
"medic_id":event.extendedProps.medic_id,
"date_at":fecha,
"time_at":hora,
"status_id":1,
"title":titulo},
traditional:true,
success:function(msg){
//console.log(msg);
//alert('Cita duplicada correctamente');
},
error:function(msg){
//console.log(msg);
alert('No se ha podido duplicar la cita');
}
});
}
Related
I am using a full calendar-5.10.1 for my project, the requirement is to show the count of appointments each day in a month view.
I am getting the total appointments by using this code but didn't able to separate them for each day.
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'America/New_York',
themeSystem: 'default',
eventColor: 'green',
editable: true,
eventDisplay: 'auto',
slotDuration: '00:05',
slotMinTime: '07:00',
slotMaxTime: '17:00',
displayEventTime: false,
showNonCurrentDates: false,
headerToolbar: {
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
center: 'title',
left: 'prev,next,today'
},
events: 'load.php?doc_session=' + doc_session,
selectable: true,
allDaySlot: false,
datesSet(dateInfo) {
// var numberOfAppointments = calendar.getEvents().filter(x => (x.start >= calendar.view.currentStart && x.end <= calendar.view.currentEnd)).length;
var numberOfAppointments = calendar.getEvents().filter(x => (x.start >= calendar.view.currentStart && x.end <= calendar.view.currentEnd)).length;
console.log(numberOfAppointments);
}
});
calendar.render();
I am using FullCalendar and i want to make older dates visible but not clickable.
Also i am using validRange property and it is working well, but it only makes them not visible.
FullCalendar version 5.
Here my codes:
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridWeek',
locale: 'de',
timeZone: 'Europe/Berlin',
hiddenDays: [0, 6],
validRange: {
start: tomorrow()
},
events: 'http://rendezvous.wm/api/available-times/<?php echo $departmentID; ?>',
headerToolbar: {
start: 'title', // will normally be on the left. if RTL, will be on the right
center: '',
end: 'today prev,next' // will normally be on the right. if RTL, will be on the left
},
displayEventEnd: true,
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
hour12: false
},
eventClick: function (info) {
window.location.href = "<?php echo WP_HOME . '/terminvereinbaren-details?'; ?>department_id=<?php echo $departmentID
. '&event_start=';?>" + info.event.start.toISOString()+"&event_end="+info.event.end.toISOString()
},
});
calendar.render();
});
and here is the screenshot:
For some reason, Fullcalendar is showing events that start past midnight as e.g. '24:15'. We want it to show '00:15'. I think this is a new issue, because we have had the calendar for a year, and this is the first I'm hearing of it. But I can't find anything about how to solve it.
We are using fullcalendar v4.2.0. I did not write the original code, but I'm fairly familiar with it. We fetch events using a REST API, and we're using ServiceNow. When using the 12-hour format (am/pm), it shows 12a15. I tried changing the eventTimeFormat, but had no luck. This is part of the client script:
/* Calendar */
c.funcs.loadCalendar = function() {
var calendarEl = document.getElementById('calendar');
c.calendar = new FullCalendar.Calendar(calendarEl, {
contentHeight: 'auto',
plugins: [ 'dayGrid','timeGrid', 'list'],
header: {
left: 'prev next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek,listMonth'
},
buttonText: {
dayGridMonth: 'Month',
timeGridWeek: 'Week',
timeGridDay: 'Day',
listWeek: 'List Week',
listMonth: 'List Month',
today: 'Today'
},
editable: false,
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
hour12: false
},
eventOverlap: false,
firstDay: 1,
weekNumbers: true,
// Scripted REST API which sends Start and End date-time of current view as parameters and gets current events.
//events: '/api/tnas/fullcalendar_fetch_data',
events: function(info, successCallback, failureCallback) {
$http({
method: 'GET',
url: '/api/tnas/fullcalendar_fetch_data',
headers: {
'X-UserToken': window.g_ck // Authorization
},
params: {
systems: c.vars.selectedSystems.map(function(system) { return system.value; }).toString(),
excludedTypes: c.vars.types.filter(function(type) {return !type.checked}).map(function(type) { if(!type.checked) return type.type }).toString(),
start: info.start,
end: info.end
}
}).success(function(data, status) {
successCallback(data.result.events);
}).error(function(data, status) {failureCallback(data)});
},
loading: function(isLoading) {
c.vars.calendarIsLoading = isLoading;
$scope.$evalAsync();
},
// When event is rendered and put into the DOM, add a tippy.js tooltip to that element.
eventRender: function(info) {
tippy(info.el, {
theme: 'light-border',
content: info.event.extendedProps.tooltipContent,
arrow: true,
animation: 'fade',
flip: false,
boundary: 'window'
});
},
eventClick: function(info){
info.jsEvent.preventDefault();
var p = $scope.data.page_id || 'form';
var url = '/sp?id=' + p + '&table=' + info.event.extendedProps.table + '&sys_id=' + info.event.id + '&view=sp';
window.open(url, "_blank");
},
navLinks: true,
navLinkDayClick: function(date, jsEvent) {
//c.calendar.gotoDate(date);
c.calendar.changeView('timeGridDay', date);
}
});
c.calendar.render();
}
/* Calendar End */
JSON of the event:
title: "Metro IN-Applikasjoner - test"
number: "SREL0004789"
start: "2020-04-15 00:15:00"
end: "2020-04-16 14:00:00"
downtime_start: ""
downtime_end: ""
className: "SystemRelease"
type: "system_release"
table: "release"
id: "4a393c2b298c54903eaa786081948e7c"
state: "New"
state_reason: null
downtime_type: "Soft"
color: "rgb(163, 222, 255, 0.5)"
tooltipContent: "<div style='text-align:left; font-size:1.5em'><p>Metro IN-Applikasjoner - test</p><p><strong>Start:</strong> 00:15, 15. apr 20</p><p><strong>End:</strong> 14:00, 16. apr 20</p></div>"
Hopefully someone has experienced the same issue before. Any help is greatly appreciated!
Fixed: Replacing the hour12 property with hourCycle: 'h23' in eventTimeFormat did the trick!
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
hourCycle: 'h23'
},
I am importing here a from a JSON with this structure:
{
"title": "M 11 Zoe Weihnachtskurs ",
"klasse": "Klasse B",
"color": "Ebreichsdorf",
"standort": "Ebreichsdorf",
"start": "2020-01-02T08:00:00",
"end": "2020-01-02T09:40:00",
"description": "Theorie B 11"
}
All is working fine and i am seeing my events with their respective times and title, but i would need the standort to be displayed too.
I was reading the documentation and tried to initiate this like:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('steinmonth');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: [ 'dayGrid', 'timeGrid' ],
defaultView: 'dayGridMonth',
weekNumberCalculation: 'ISO',
hiddenDays: [ 0 ],
views: {
dayGrid: {
// options apply to dayGridMonth, dayGridWeek, and dayGridDay views
displayEventEnd: true,
titleFormat: { day: 'numeric', month: 'short' },
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
meridiem: false
}
},
timeGrid: {
// options apply to timeGridWeek and timeGridDay views
},
week: {
// options apply to dayGridWeek and timeGridWeek views
},
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,timeGridWeek',
},
eventSources: [
{
url: 'https://arcanas.at/wp-content/plugins/steincal/steinmonth.json',
method: 'POST',
title: 'name',
start: 'start',
end: 'end',
extendedProps: {
standort: 'standort',
color: 'color',
description: 'description'
},
color: 'white',
textColor: 'black'
}
],
eventRender: function (info) {
console.log(info.event.extendedProps)
if ( event.standort ) {
element.find('.fc-title').append('<br />' + event.standort);
//element.find('.fc-content').append('<span class="fc-standort">' + event.standort + '</span>');
}
},
});
calendar.setOption('locale', 'de-at');
calendar.render();
});
and the console output is
{klasse: "Klasse B", standort: "Ebreichsdorf", description: "Theorie GW 03"}
So how do i append the standort value for every event to the object? There must be something i overlooked.
Oh, this was too simple - closing, but perhaps someone will find this useful:
eventRender: function(info) {
info.el.querySelector('.fc-title').innerHTML = info.event.title + "</br>" + info.event.extendedProps.standort;
},
I have used this code but it is not working to disable dates with out event,here in this code there will be dates which will be available but some dates blank which is clickable, if i click on it is showing one popup i have created but color is turning into green which is not required please check it
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek'
},
views: {
month: {
titleFormat: 'YYYY, MM, DD'
}
},
validRange: function(nowDate) {
return {
start: nowDate,
end: nowDate.clone().add(2, 'months')
};
},
navLinks: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
startDate = moment(new Date(start)).format("MM-DD-YYYY");
endDate = moment(new Date(end)).format("MM-DD-YYYY");
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background',
block: true,
}]);
$("#calendar").fullCalendar("unselect");
},
selectOverlap: function(event) {
return !event.block;
},
dayRender: function(date, cell) {
if (!IsDateHasEvent(date)) {
$(cell).addClass('fc-disabled-day disabled');
}
},
editable: true,
eventLimit: true,
events: function(start, end, timezone, callback) {
$.ajax({
url: '/my-url',
dataType: 'json',
data: {
tutor_id: $('#tutor_id').val()
},
success: function(response) {
var events = [];
for (var i = 0; i < response.length; i++) {
var start = response[i]['tutor_start_date'] + ' ' + response[i]['tutor_start_time'];
var end = response[i]['tutor_start_date'] + ' ' + response[i]['tutor_end_time'];
events.push({
start: start,
end: end,
color: '#8ec165',
tutor_id: response[i]['tutor_id'],
id: response[i]['id'],
textColor: 'white'
});
}
callback(events);
}
});
},
eventClick: function(event, jsEvent, view) {
startDate = moment(new Date(event.start)).format("YYYY-MM-DD hh:mm:ss");
endDate = moment(new Date(event.end)).format("YYYY-MM-DD hh:mm:ss");
var startEndDate = startDate + ',' + endDate;
slected_date_arr.push(startEndDate);
var myJsonString = JSON.stringify(slected_date_arr);
$('#selected_date_times').val(myJsonString);
},
dayClick: function(date, allDay, jsEvent, view) {
if (!IsDateHasEvent(date)) {
selectedDate = date;
// $("#divAddNewAppointment").dialog("open");
alert('This date is not available for selection');
return false;
} else {
// $('<%= "#" + lblMessage.ClientID%>').html(" your error msg");
// $("#divMessage").dialog("open");
console.log('there is event');
return true;
}
},
loading: function(bool) {
$('#loading').toggle(bool);
},
eventRender: function(event, element) {
element.qtip({
content: '<b> Time -' + event.start.format('hh:mma') + ' - ' + event.end.format('hh:mma') + '</b>',
});
},
eventAfterAllRender: function(view) {
$(".fc-time-grid-event").on('click', function(e) {
e.preventDefault();
$(this).css('background-color', '#B7A6EE');
$(this).css('border-color', '#B7A6EE');
$(this).removeClass("fc-time-grid-event").addClass("selected-event");
var quantity = $('.selected-event').length;
$("#quantity").val(quantity);
var totalQuantity = $("#quantity").val();
var tutorAmount = {
{
$tutor_price
}
};
var totalAmount = totalQuantity * tutorAmount;
$("#payable_amount").html(totalAmount);
$("#coursePrice").val(totalAmount);
});
$(".fc-day-grid-event").on('click', function(e) {
e.preventDefault();
$(this).css('background-color', '#B7A6EE');
$(this).css('border-color', '#B7A6EE');
$(this).removeClass("fc-day-grid-event").addClass("selected-event");
var quantity = $('.selected-event').length;
$("#quantity").val(quantity);
var totalQuantity = $("#quantity").val();
var tutorAmount = {
{
$tutor_price
}
};
var totalAmount = totalQuantity * tutorAmount;
$("#payable_amount").html(totalAmount);
$("#coursePrice").val(totalAmount);
});
},
});
Definition for IsDateHasEvent()
function IsDateHasEvent(date) {
var allEvents = [];
allEvents = $('#calendar').fullCalendar('clientEvents');
var event = $.grep(allEvents, function (v) {
return +v.start === +date;
});
return event.length > 0;
}
This calendar is displaying to students, so I want them to select only available slots.