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);
Related
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
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; ?>];
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>
I have a registration form, where people can select multiple dates selected from a database. I use the jQuery UI Datepicker. Everything works fine, but when I submit the form it saves me the date itself like this : "09/16/2012,08/04/2011,04/19/1994". I would like to store the ID of the date instead.
Does anyone know how to get the ID of the selected date, and put it in the value="" attribute?
<input type="text" class="datepicker" name="live[]" value="">
<script>
var dates = [<?php $i=0; while($dataDate = mysql_fetch_object($dates)) : echo ($i>0) ? ", " : ""; echo '"'.date("n-j-Y", strtotime($dataDate->date)).'"'; $i++; endwhile;?>];
var enabledDays = dates;
function enableAllTheseDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < enabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1) {
return [true];
}
}
return [false];
}
$('.datepicker').datepicker({
beforeShowDay: enableAllTheseDays,
yearRange: "1994:2012",
changeMonth: true,
changeYear: true
});
</script>
Okay so heres totally new aproach to get desired outcome.
first of all, put the dates in json obejct.
make your SQL query select id, date from database
now if you have php json available, just use
<?php
while($row = mysql_fetch_object($query) ) {
$data[] = array( "id" => $row['id'], "date" => $row['date'] );
}
echo "var dates = [" . json_encode($data) . "];";
?>
otherwise you can do it like this:
<?php
echo "var dates = [";
while($row = mysql_fetch_object($query) ) {
$data[] = '{"id" : "' .$row["id"] . '", "date" : "' . $row["date"] . '" }';
}
echo implode(',', $data);
echo "];";
?>
Now we got json object which should look like
[{"id" : "12", "date": "2012-02-01"},{"id" : "33", "date": "2012-02-03"}]
i tweaked your function little bit, to work with our json object
function enableAllTheseDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
var datestr = y + "-" + m + "-" + d;
for (i = 0; i < dates.length; i++) {
if( dates[i].date == datestr) {
return [true];
}
}
return [false];
}
$('.datepicker').datepicker({
beforeShowDay: enableAllTheseDays,
yearRange: "1994:2012",
changeMonth: true,
changeYear: true
});
Now back to getting the id
$('.datepciker').on('change',function() {
for(var i = 0; i < dates.length; i++) {
if( dates[i].date == $(this).val() )
var index = dates[i].id;
}
$("#date_id_holder").val( index );
});
and now your $("#date_id_holder") contains the id of selected date