I'm trying to make some repeating events on a certain time with full calendar.
For example i want the events to happen from
1-3-2016
until 1-7-2016.
Here is the code that i take all the events.
<script type="text/javascript">
$(document).ready(function()
{
var events=new Array();
var numberofevents = '<?php echo count ($info); ?>';
<?php
foreach($info as $module => $kati) { ?>
var date = new Date('<?php echo $kati['ModuleSchedule_StartTtime']; ?>');
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var time = date.getHours();
var start_date = new Date(year, month, day, time, 0);
var end_date = new Date(year, month, day, time+2, 0);
var ranges = [{ start:"2016/03/01", end:"2016/06/01"}] //range of repeat
var event_name = '<?php echo $kati['ModuleSchedule_Module_Name']; ?>';
var event_description = '<?php echo $kati['ModuleSchedule_Semester_Name'] ?>' + '<br/>' + '<?php echo $kati['ModuleSchedule_Classroom'] ?>' + '<br/>' + '<?php echo $kati['ModuleSchedule_TeacherUserFullName'] ?>';
event = new Object();
event.title = event_name;
event.start = start_date;
event.end = end_date;
event.description = event_description;
event.color = "blue";
event.dow = '<?php echo $kati['ModuleSchedule_DayOfWeek']; ?>';
event.ranges = ranges;
event.allDay = false;
events.push(event);
<?php }
?>
$('#calendar').fullCalendar({
eventRender: function(event, element, view) {
// opens events in a popup window
element.find('.fc-title').append("<br/>" + event.description);
element.qtip({ content: "Στοιχεία μαθήματος: " + event.title + "<br/>" + event.description});
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
weekMode: 'liquid',
weekends: true,
theme: true,
selectable: true,
editable: false,
events: events
});
});
On the line that i take the "ranges" is there any proper way to add then in the event ?
Because for sure what i'm trying to do is wrong here.
Thanks for your time!
Add this to your event object
event.dowend = new Date('2016/7/1');
and on eventRender check if date has reach the dowend and if that's true return false, so the calendar wont create the event
eventRender: function(event, element, view) {
// opens events in a popup window
element.find('.fc-title').append("<br/>" + event.description);
element.qtip({ content: "Στοιχεία μαθήματος: " + event.title + "<br/>" + event.description});
var theDate = event.start
var endDate = event.dowend;
if (theDate >= endDate) {
return false;
}
}
I extended the solution and created a jsfiddle [
$(document).ready(function() {
$('#scheduler').fullCalendar({
eventRender: function(event, element, view) {
var theDate = event.start
var endDate = event.dowend;
var startDate = event.dowstart;
if (theDate >= endDate) {
return false;
}
if (theDate <= startDate) {
return false;
}
},
defaultView: 'month',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-01-15T16:00:00',
events: [{
id: 1,
title:"Front End",
start:'10:00',
end: '13:00',
dow: [0, 1, 2, 3, 4, 5, 6],
dowstart: new Date('2016/01/03'),
dowend: new Date('2016/01/17')
}
]
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet"/>
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<div id='scheduler'></div>
]1 to show you the specific solution that display daily concurrent event only between two dates.
The solution relies on add the two custom dates parameters for the event object:
dowstart: new Date('2016/01/03'),
dowend: new Date('2016/01/17')
And then add the condition to the eventRender function:
eventRender: function(event, element, view) {
var theDate = event.start
var endDate = event.dowend;
var startDate = event.dowstart;
if (theDate >= endDate) {
return false;
}
if (theDate <= startDate) {
return false;
}
}
You can also use ranges. Please check the code below
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: moment(),
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
events: [{
title: "My repeating event",
start: '10:00',
end: '14:00',
dow: [1, 2, 3, 4],
ranges: [{
start: moment().startOf('week'), //next two weeks
end: moment().endOf('week').add(7, 'd'),
}, {
start: moment('2018-06-15', 'YYYY-MM-DD'), //all of february
end: moment('2018-06-15', 'YYYY-MM-DD').endOf('month'),
}, ],
}],
eventRender: function(event) {
return (event.ranges.filter(function(range) {
return (event.start.isBefore(range.end) &&
event.end.isAfter(range.start));
}).length) > 0;
},
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.js"></script>
<div id='calendar'></div>
Related
I'm using FullCalendar.io and implemented a few features. When trying to link an existing appointment to its client_id, I don't get the variable in a hyperlink. The variable does appear in the modal div when calling modalclient_id (please see picture), but need it in my hyperlink. Any help is much appreciated!
INDEX.PHP
<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Detalhes:</h4>
</div>
<div id="modalBody" class="modal-body">
<div id="modalTitle" class="modal-title"></div>
<div id="modalclient_id"></div>
<div id="modalStatus" style="margin-top:5px;"></div>
<a id="lnkTarget" href="#">List all appointments</a>
<script type="text/javascript">
var x = "/schedule/list-appointments.php?id=";
var y = $('#modalclient_id').html(); // this gets what's inside <div>here</div>
//var y= $('#modalClientID').val('event.client_id');
//var y = $(this).attr('#client_id');
//var y = $(this).attr('client_id');
//var y= $("#client_id").text();
var result = x + y;
$('#lnkTarget').attr('href', result);
});
});
</script>
SCRIPT.JS
$(document).ready(function(){
var calendar = $('#calendar').fullCalendar({
header:{
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
//defaultView: 'agendaDay',
editable: true,
selectable: true,
allDaySlot: false,
events: "index.php?view=1",
eventClick: function(event, jsEvent, view) {
endtime = $.fullCalendar.moment(event.end).format('h:mm');
starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm');
var mywhen = starttime + ' - ' + endtime;
$('#modalTitle').html(event.title);
$('#modalStatus').html(event.status);
$('#modalclient_id').text(event.client_id);
$('#modalWhen').text(mywhen);
$('#eventID').val(event.id);
$('#calendarModal').modal();
},
//header and other values
select: function(start, end, jsEvent) {
endtime = $.fullCalendar.moment(end).format('h:mm');
starttime = $.fullCalendar.moment(start).format('dddd, MMMM Do YYYY, h:mm');
var mywhen = starttime + ' - ' + endtime;
start = moment(start).format();
end = moment(end).format();
$('#createEventModal #startTime').val(start);
$('#createEventModal #endTime').val(end);
$('#createEventModal #when').text(mywhen);
$('#createEventModal').modal('toggle');
},
eventDrop: function(event, delta){
$.ajax({
url: 'index.php',
data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id ,
type: "POST",
success: function(json) {
//alert(json);
}
});
},
eventResize: function(event) {
$.ajax({
url: 'index.php',
data: 'action=update&title='+event.title+'&start='+moment(event.start).format()+'&end='+moment(event.end).format()+'&id='+event.id,
type: "POST",
success: function(json) {
//alert(json);
}
});
}
});
$('#submitButton').on('click', function(e){
// We don't want this to act as a link so cancel the link action
e.preventDefault();
doSubmit();
});
$('#deleteButton').on('click', function(e){
// We don't want this to act as a link so cancel the link action
e.preventDefault();
doDelete();
});
function doDelete(){
$("#calendarModal").modal('hide');
var eventID = $('#eventID').val();
$.ajax({
url: 'index.php',
data: 'action=delete&id='+eventID,
type: "POST",
success: function(json) {
if(json == 1)
$("#calendar").fullCalendar('removeEvents',eventID);
else
return false;
}
});
}
function doSubmit(){
$("#createEventModal").modal('hide');
var title = $('#title').val();
var startTime = $('#startTime').val();
var endTime = $('#endTime').val();
var status = $('#status').val(); /// added.
var client_id = $('#client_id').val(); /// added.
var active = $('#active').val(); /// added.
var added_user = $('#added_user').val(); /// added.
$.ajax({
url: 'index.php',
data: 'action=add&title='+title+'&start='+startTime+'&end='+endTime+'&status='+status+'&client_id='+client_id+'&active='+active+'&added_user='+added_user, //added
type: "POST",
success: function(json) {
$("#calendar").fullCalendar('renderEvent',
{
id: json.id,
title: title,
start: startTime,
end: endTime,
status: status,
client_id: client_id,
active: active,
added_user: added_user
},
true);
}
});
}
});
The JS code in your first snippet is executed before the data is updated by clicking your calendar. You need to remove that logic and update the href of #lnkTarget within the eventClick handler:
eventClick: function(event, jsEvent, view) {
let endtime = $.fullCalendar.moment(event.end).format('h:mm');
let starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm');
let mywhen = starttime + ' - ' + endtime;
$('#modalTitle').html(event.title);
$('#modalStatus').html(event.status);
$('#modalclient_id').text(event.client_id);
$('#modalWhen').text(mywhen);
$('#eventID').val(event.id);
$('#calendarModal').modal();
$('#lnkTarget').prop('href', '/schedule/list-appointments.php?id=' + event.client_id // add this line
},
});
I'm new to fullcalendar and i have been reading the documentation but it's still a bit confusing. So far i have managed to do this
<link rel="stylesheet" href="~/lib/fullcalendar/core/main.css" />
<link rel="stylesheet" href="~/lib/fullcalendar/daygrid/main.css" />
<div class="container">
<div id="calendar"></div>
</div>
<script src="~/lib/fullcalendar/core/main.js"></script>
<script src="~/lib/fullcalendar/daygrid/main.js"></script>
<script src="~/lib/fullcalendar/interaction/main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid', 'interaction'],
defaultView: 'dayGridMonth',
dateClick: function (info) {
//alert('Clicked on: ' + info.dateStr);
//alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
//alert('Current view: ' + info.view.type);
// change the day's background color just for fun
info.dayEl.style.backgroundColor = 'red';
},
events: [{
title: 'Teste',
start: '2019-07-17',
end: '2019-07-18',
backgroundColor: '#red',
borderColor: '#red'
}],
weekNumbers: true,
weekNumberCalculation: 'ISO',
selectable: true
});
calendar.render();
});
</script>
I have a click on day event set already and made it selectable as you can see.
What i would like to do is when i click a button to get the days selected so i can save in database but i don't see any function on the select documentation about getting this data
firstly, I add a class name "selected" according to the selected dates and then search in the dom by document.getElementsByClassName('selected') .Also Add a button to show the output in the console. Here is my working code.
<link rel="stylesheet" href="~/lib/fullcalendar/core/main.css" />
<link rel="stylesheet" href="~/lib/fullcalendar/daygrid/main.css" />
<div class="container">
<button type='button' id='days' onclick='allSelectedDays()'>GET Days</button>
<div id="calendar"></div>
</div>
<script src="~/lib/fullcalendar/core/main.js"></script>
<script src="~/lib/fullcalendar/daygrid/main.js"></script>
<script src="~/lib/fullcalendar/interaction/main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid', 'interaction'],
defaultView: 'dayGridMonth',
dateClick: function(info) {
//alert('Clicked on: ' + info.dateStr);
//alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
//alert('Current view: ' + info.view.type);
// change the day's background color just for fun
info.dayEl.style.backgroundColor = 'red';
info.dayEl.className += ' selected';
},
events: [{
title: 'Teste',
start: '2019-07-17',
end: '2019-07-18',
backgroundColor: '#red',
borderColor: '#red'
}],
weekNumbers: true,
weekNumberCalculation: 'ISO',
selectable: true
});
calendar.render();
});
</script>
<script>
function allSelectedDays() {
//var days = $("#calendar table tbody td").css();
var days = document.getElementsByClassName('selected');
var selected = [];
for (let i = 0; i < days.length; i++) {
selected.push(days[i].getAttribute('data-date'));
}
console.log(selected);
}
</script>
I'm sharing with you my js code in which conflicts are occurring. It's not including files such as minicart/content.html, authentication-popup.html, Template/collection.html, Template/messages.html, checkout/captcha.html in the console whereas it's in luma (default) theme:
jQuery(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar_mode = '';
var switchMode = '<?php echo $block->getScopeConfig('events/calendar_setting/allow_switch_mode'); ?>';
var defaultMode = '<?php echo $block->getScopeConfig('events/calendar_setting/default_view_mode'); ?>';
if (switchMode == '1') {
calendar_mode = 'month,agendaWeek,agendaDay';
}
var events = <?php echo $eventsJson; ?>;
jQuery('#calendar').fullCalendar({
<?php if ($locale != 'en') { ?>
locale: "<?php echo $locale; ?>",
<?php } ?>
editable: true,
displayEventEnd:true,
disableDragging: true,
header: {
left: 'prev,next today',
center: 'title',
right: calendar_mode
},
defaultView: defaultMode,
eventTextColor: 'white',
timeFormat: 'H:mm',
events: events,
eventMouseover: eventMouseoverFunc,
eventMouseout: eventMouseoutFunc
});
</script>
okay so while debugging i found out that the conflict was occurring due to 2 major issues:
changing the class of jQuery('#calendar').fullCalendar({ to jQuery('#any_unique_id').fullCalendar({ and parallely changing the calendar div id to the same div id='calendar'> to div id='any_unique _id'>
changing the require function to :
require(['jquery', 'mage/mage','fullcalendar', 'moment'<?php if ($locale != 'en') { ?>, 'locale_all'<?php } ?>], function($){
And finally it worked!
On a landing page a datepicker is loaded as you can see in the image. I want to be able to change the background colors of specific dates on the calendar.
For example :
If 27-11-2017 slot is booked, then on load I want the color to change for that date.
My Script code:
<script>
$(document).ready(function () {
// I am getting a data on this loop so how can i change same date background color
#if(!empty($BookeData))
#foreach($BookeData as $key => $value)
#if($value->event_date)
#endif
#endforeach
#endif
/* Gt data in $BookeData
array:13 [
"id" => 8
"source_type" => "App\Venue"
"source_id" => 7
"event_date" => "2017-11-28"
"session" => "1"
"payment" => "5000"
"status" => "Booked"
"created_at" => "2017-11-27 10:30:22"
"updated_at" => "2017-11-27 10:30:22"
]*/
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#datepicker').datepicker({
changeYear: true,
multidate :true,
maxViewMode: 0,
startDate: today
}).on('changeDate', function(e) {
var $date = $.datepicker.formatDate('yy-mm-dd', e.date);
$("#event_date").val($date);
//e.preventDefault();
//var formData = $('form').serialize();
$.ajax({
type: 'GET',
url: "{{ route('admin.calendar.add') }}",
data: {'date':$date},
cache: false,
success: function(response){
$("#calendar div.divForm").html(response);
$("<input type='hidden' value='' name='event_date' id='event_date' />").appendTo('#calendar div.dateDiv');
$("#event_date").val($date);
$("#calendar").show();
}
});
});
$(".close").on("click", function() {
$("#calendar").hide();
});
});
As i understand your issue, try as like below:
<input type="text" id="datepicker" />
var booked_date = ["27/11/2017"]; //Take your booked date here from your data
$("#datepicker").datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
beforeShowDay: function(date){
var d = date;
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
var formattedDate = curr_date + "/" + curr_month + "/" + curr_year
if ($.inArray(formattedDate, booked_date) != -1){
return {
classes: 'activeClass'
};
}
return;
}
});
The activeClass can be any form of CSS. In my example i have just changed the background color. In your example you could offset an image and apply it to the day.
.activeClass{
color: yellow;
background: white;
}
Hope this helps you OR you can get some idea!
I have the below code:
$('#demo-calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
slotDuration: '00:15:00',
defaultView: 'agendaDay',
editable: false,
droppable: true,
drop: function() {
if ($('#drop-remove').is(':checked')) {
$(this).remove();
}
},
viewRender: function(currentView){
var minDate = moment();
if (minDate >= currentView.start && minDate <= currentView.end) {
$(".fc-prev-button").prop('disabled', true);
$(".fc-prev-button").addClass('fc-state-disabled');
}
else {
$(".fc-prev-button").removeClass('fc-state-disabled');
$(".fc-prev-button").prop('disabled', false);
}
},
select:function (){$('#demo-calendar').fullCalendar('unselect')},
eventLimit: true,
events: [
<?php foreach ($appowthslot as $appowthslotlist){
$startdate = date('Y-m-d H:i:s',strtotime($appowthslotlist->starttime));
$enddate = date('Y-m-d H:i:s',strtotime($appowthslotlist->endtime));
if($appowthslotlist->relatedappid !=0 ){
$color = "#ff0000";
}else{
$color = "#076903";
}
?>
{
"color": "<?php echo $color; ?>",
"start": "<?php echo $startdate; ?>",
"end": "<?php echo $enddate; ?>",
},
<?php } ?>
],
eventClick: function(event) {
var cdate=new Date();
var mydate = new Date(event.start);
var now = mydate.toUTCString().toString();
var res = now.replace("GMT","");
var newdate= new Date(res);
if(cdate>newdate){
alert("Appointment can't be book for previous Time");
}else{
if(event.color == "#ff0000"){
alert("This Slot is already Booked");
}else{
startdate = (new Date(event.start)).toISOString().slice(0, 19);
$('#scheduled_date #start_time_hidden').val(startdate);
$('#scheduled_date #start_time').val(startdate.replace("T"," "));
enddate = (new Date(event.end)).toISOString().slice(0, 19);
$('#scheduled_date #end_time_hidden').val(enddate);
$('#scheduled_date #end_time').val(enddate.replace("T"," "));
$('#scheduled_date').modal('show');
}
}
}
});
I am not getting the default time slot as 15 minutes but I am getting the timeslot interval as 1 hour.
When I am clicking the week view and then again clicking on day view I am getting 15 minutes timeslot.
You have already used
$('#demo-calendar').fullcalendar({
...
slotDuration: 15,
...
});
Instead of it you can try bellow option
$('#demo-calendar').fullcalendar({
...
slotMinutes: 15,
...
});
Hope it's works