Develop Reference

calendar not displaying in my customised magento2 theme but is coming in luma(default)

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!

Disable days in a datepicker using select statement to database table

first code is for take dates between 2 dates from my table reservas...
<?php
include "controlreservas/conexion.php";
$sql1="select llegada, salida from reservas";
$query = $con->query($sql1);
$r=$query->fetch_array();
$begin = new DateTime( $r["llegada"] );
$end = new DateTime( $r["salida"] );
$end = $end->modify( '+1 day' );
$interval = new DateInterval('P1D');
$daterange = new DatePeriod($begin, $interval ,$end);
?>
<?php foreach ($daterange as $date) : ?>
<?php echo $date->format("Y-m-d"); ?>
this it´s working :
2016-12-20
2016-12-21
2016-12-22
2016-12-23
2016-12-24
Now the next code is for disable this dates (all this dates, only get from the select ) in my datepicker :
<script>
$(function() {
var disabledDays = ["<?php echo $date->format("Y-m-d"); ?>"];
var date = new Date();
jQuery(document).ready(function() {
$( "#datepicker1").datepicker({
dateFormat: 'Y-m-d',
beforeShowDay: function(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) {
//return [false];
return [true, 'ui-state-active', ''];
}
}
return [true];
}
});
});
});
</script>
the result is only disables first date, not all dates :
thanks for you time

The variable disabledDates (in javascript) should be an Array of strings, where each string represents a date that you want to disable.
What you can do is create that list from the $daterange variable that you have in php:
$dates_ar = [];
foreach ($daterange as $date) {
$dates_ar[] = $date->format("Y-m-d");
}
$disabled_dates = '"' . implode('", "', $dates_ar) .'"';
And then in your javascript code you can use the $disabled_dates variable (which is a string that contains the values you need:
$(function() {
var disabledDays = [<?php echo $disabled_dates; ?>];

Repeating time on fullcalendar event

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>

Fullcalendar select: check if allDay

I am using Fullcalendar to make a scheduler.
I am trying to pass information to a form which will add the event information.
I am now trying to figure out if an event is allDay or not.
What I am doing to test this out is to alert onscreen if the allDay box at the top of the calendar was selected. If so, alert 'is all day'. I have been reading about using .hasTime() but it won't work.
Really I want to populate a hidden input on createEventModal called allDay with a 0 for 'not full day' and a 1 for 'allDay' to save it in my mySQL db.
Here's the code I'm working on to see if the selected event is allDay. So far, it always alerts 'not full day', even if the allDay section is selected.
select: function(start, end, allDay) {
var starttime = moment(start).format('MMMM Do YYYY h:mm a');
var endtime = moment(end).format('h:mm a');
var start = moment(start).format('YYYY-MM-DDTHH:mm:ssZ');
var end = moment(end).format('YYYY-MM-DDTHH:mm:ssZ');
var location_id = "<?php echo $location->data()->id; ?>";
var contact_id = "<?php echo $contact->data()->id; ?>";
var company_id = "<?php echo $user->data()->company_id; ?>";
var mywhen = starttime + ' - ' + endtime;
var contactname = "<?php echo $contact->data()->first; ?>" + " " + "<?php echo $contact->data()->last; ?>";
var m = $.fullCalendar.moment(starttime);
if (m.hasTime()) { alert ('not full day'); } else { alert('full day'); };
$('#createEventModal #start').val(start);
$('#createEventModal #end').val(end);
$('#createEventModal #allDay').val(allDay);
$('#createEventModal #when').text(mywhen);
$('#createEventModal #contact_name').text(contactname);
$('#createEventModal #contact_id').val(contact_id);
$('#createEventModal #location_id').val(location_id);
$('#createEventModal #company_id').val(company_id);
$('#createEventModal').modal();
},

I figured something out. This will alert the proper true or false values for the selected time depending on if an allDay blocked is being added to my DB.
select: function(start, end, jsEvent, view) {
var starttime = moment(start).format('MMMM Do YYYY h:mm a');
var endtime = moment(end).format('h:mm a');
var allDay = !start.hasTime() && !end.hasTime();
alert(allDay);

Update function dialog jquery php

Im using fullcalendar. And when i click on an event it opens a dialog where i see the current event title/description/startdate/enddate. I have an update edit button so when i change one of the variables it wil change the variable in the database. But that doesnt work somehow.
agenda_view.php:
<html>
<head>
<link href='<?=base_url();?>testcalendar/css/fullcalendar.css' rel='stylesheet' />
<script src='<?=base_url();?>testcalendar/js/jquery-1.9.1.min.js'></script>
<script src='<?=base_url();?>testcalendar/js/jquery-ui-1.10.2.custom.min.js'></script>
<script src='<?=base_url();?>testcalendar/js/fullcalendar.min.js'></script>
<script src='<?=base_url();?>testcalendar/js/fullcalendarextern.js'></script>
<script src='<?=base_url();?>testcalendar/js/nieuweafspraak.js'></script>
<link href="<?=base_url();?>testcalendar/assets/css/jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css" />
<style>
body {
margin-top: 40px;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="dialogstatusevent" style="display:none" title="Mijn Afspraak">
<form>
<div class="control-group">
<div class="controls">
<label class="control-label">Titel:</label>
<input type="text" name="title" id="titlestatus" class="text ui-widget-content ui-corner-all">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="control-label">Description:</label>
<input type="text" name="description" id="descstatus" class="text ui-widget-content ui-corner-all">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="control-label">Van:</label>
<input type="text" name="datestatusstart" id="datestatusstart" class="text ui-widget-content ui-corner-all">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="control-label">Tot:</label>
<input type="text" name="datestatusend" id="datestatusend" class="text ui-widget-content ui-corner-all">
</div>
</div>
</form>
</div>
<div id='calendar'></div>
</body>
</html>
Fullcalendarextern.js:
$(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: "../testcalendar/fullcalendar/events.php",
// Convert the allDay from string to boolean
eventRender: function(event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '../testcalendar/fullcalendar/add_events.php',
data: 'title='+ title+'&start='+ start +'&end='+ end ,
type: "POST",
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventDrop: function(event, delta) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '../testcalendar/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
});
},
eventResize: function(event) {
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
$.ajax({
url: '../testcalendar/fullcalendar/update_events.php',
data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
type: "POST",
});
},
eventClick: function(calEvent, jsEvent, view) {
$( "#dialogstatusevent" ).dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
modal: true,
closeOnEscape:true,
resizable:false,
show:'fade',
buttons: {
"Edit": function() {
var titlestatus = $("#titlestatus").val(),
descstatus = $('#descstatus').val(),
datestart = $('#datestatusstart').val(),
dateend = $('#datestatusend').val();
$.post('../testcalendar/db/processupdate.php',{
user_name: titlestatus, user_desc: descstatus, user_start: datestart, user_end: dateend, action:'joined'
}); var nTime = 1 * 50;
window.setTimeout("location.reload()", nTime);//End Post
$("#titlestatus").val('');
$("#descstatus").val('');
$("#datestatusstart").val('');
$("#datestatusend").val('');
$(this).dialog("close");
},
"Cancel": function() {
$("#titlestatus").val('');
$("#descstatus").val('');
$("#datestatusstart").val('');
$("#datestatusend").val('');
$(this).dialog("close");
}
}
}
);
$("#titlestatus").val(calEvent.title),
$("#descstatus").val(calEvent.description),
$("#datestatusstart").val(calEvent.end),
$("#datestatusend").val(calEvent.start),
$("#datestatusstart").datepicker({ dateFormat: 'yy-mm-dd' }),
$("#datestatusend").datepicker({ dateFormat: 'yy-mm-dd' });
$( "#dialogstatusevent" ).dialog( "open" );
},
eventMouseover: function(event, domEvent) {
var layer = '<div id="events-layer" class="fc-transparent" style="position:absolute; width:100%; height:100%; top:-1px; text-align:right; z-index:100"><a><img src="../testcalendar/editbt.png" title="edit" width="14" id="edbut'+event.id+'" border="0" style="padding-right:3px; padding-top:2px;" /></a><a><img src="../testcalendar/delete.png" title="delete" width="14" id="delbut'+event.id+'" border="0" style="padding-right:5px; padding-top:2px;" /></a></div>';
$(this).append(layer);
$("#delbut"+event.id).hide();
$("#delbut"+event.id).fadeIn(300);
$("#delbut"+event.id).click(function() {
$.ajax({
url: '../testcalendar/fullcalendar/delete_events.php',
data: 'id=' + event.id ,
type: "POST",
});
var nTime = 1 * 50;
window.setTimeout("location.reload()", nTime);
});
$("#edbut"+event.id).hide();
$("#edbut"+event.id).fadeIn(300);
$("#edbut"+event.id).click(function() {
var title = prompt( '\n\nNew Event Title: ');
if(title){
$.ajax({
url: '../testcalendar/fullcalendar/update_title.php',
data: 'title='+ title+'&id='+ event.id ,
type: "POST",
});
var nTime = 1 * 50;
window.setTimeout("location.reload()", nTime);
}
});
},
eventMouseout: function(calEvent, domEvent) {
$("#events-layer").remove();
},
});
});
processupdate.php:
<?php
//include db configuration file
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end){
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
{
$user_name=$_POST['user_name'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined'){
user_joined($user_name, $user_desc, $user_start, $user_end);
}
}
/*if ( (isset($_POST["id"]) && strlen($_POST["id"]) >= 3 && strlen($_POST["id"]) <= 60) &&
(isset($_POST["name"]) && strlen($_POST["name"]) >= 3 && strlen($_POST["name"]) <= 50) &&
(isset($_POST["age"]) && strlen($_POST["age"]) >= 3 && strlen($_POST["age"]) <= 40) )
{ //check $_POST["name"] and $_POST["address"] and $_POST["city"] are not empty
$id = $_POST["id"];
$name = $_POST["name"];
$age = $_POST["age"];
$q = "INSERT INTO tbltest ( id, name, age) VALUES
('".$id."','".$name."','".$age."')";
mysql_query($q);
}*/
?>
connection.php:
<?php
$db_host = "localhost";
// Place the username for the MySQL database here
$db_username = "roots";
// Place the password for the MySQL database here
$db_pass = "root";
// Place the name for the MySQL database here
$db_name = "blackboks-calendar";
// Run the actual connection here
mysql_connect("$db_host","$db_username","$db_pass") or die ("could not connect to mysql");
mysql_select_db("$db_name") or die ("no database");
?>

Try if you are getting an alert ?
<?php
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end)
{
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
$user_name=$_POST['user_name'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined')
user_joined($user_name, $user_desc, $user_start, $user_end);
print_r($_POST);
?>
Pass id through POST as well , you need to send the required id value
$.post('../testcalendar/db/processupdate.php',
{ 'user_name' : titlestatus, 'user_desc': descstatus, 'user_start' : datestart, 'user_end' : dateend, 'action':'joined' ,'id' : id },
function(response){
alert(response);
});

It doesnt echo the id.
processupdate.php:
<?php
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end)
{
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
$id=$_POST['id'];
$user_name=$_POST['title'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined')
user_joined($user_name, $user_desc, $user_start, $user_end);
echo $id;
print_r($_POST); ?>

Like this? it doesnt output something in the alert either:(
<?php
include 'connection.php';
function user_joined($user_name,$user_desc, $user_start, $user_end){
$q = "UPDATE evenement SET title='". $user_name ."'description='". $user_desc ."'start='". $user_start ."'end='". $user_end ."' WHERE id=".$id;
mysql_query($q);
}
{
$user_name=$_POST['user_name'];
$user_desc=$_POST['user_desc'];
$user_start=$_POST['user_start'];
$user_end=$_POST['user_end'];
$action=$_POST['action'];
if ($action=='joined')
user_joined($user_name, $user_desc, $user_start, $user_end);
} ?>