Develop Reference

FullCalendar JS Get selected days

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>

Amsul DatePicker - How do you disable dates on the calendar?

I have just installed an amsul datepicker, and I'm unable to figure out how do you disable dates? For example, if I want the calendar to show today's date and future dates until 1 year. E.g: 2nd May 2019 -> 2nd May 2020. I want to disable all previous dates.
Also, I'm trying to build a From -> to date picker, so for example if a user selects 3rd May 2019 on the from input he/she should only be allowed to select dates from 3rd May 2019 till 3rd May 2020 in the "to" input.
Thanks.
Amsul: https://amsul.ca/pickadate.js/
// DatePicker
var dPicker;
var initialDateSet = false;
var backup = "";
$('.datepickerCheckin').pickadate({
onSet: function() {
if (!initialDateSet) {
$('.timepickerCheckin').click();
} else {
var tempString = dPicker.get();
var tempString2 = backup.substr(backup.indexOf("at"), backup.length);
$('.datepickerCheckin').val(tempString + " " + tempString2);
backup = $('.datepickerCheckin').val();
}
},
onOpen: function() {
dPicker = this;
if (initialDateSet) {
var index = $('.datepickerCheckin').val().indexOf("at");
if ($('.datepickerCheckin')[0].selectionStart > index) {
dPicker.close(true);
$('.timepickerCheckin').click();
}
}
},
format: 'dd mmm, yyyy',
today: '',
clear: '',
close: '',
});
// TimePicker
$('.timepickerCheckin').pickatime({
onSet: function() {
var tempString;
if (!initialDateSet) {
tempString = $('.datepickerCheckin').val() + " at " +
$('.timepickerCheckin').val();
$('.datepickerCheckin').val(tempString);
backup = tempString;
initialDateSet = true;
} else {
tempString = backup.substr(0, backup.indexOf("at"));
$('.datepickerCheckin').val(tempString + "at " +
$('.timepickerCheckin').val());
backup = $('.datepickerCheckin').val();
}
},
clear: '',
format: 'HH:i'
})
// DatePicker Checkout
$('.datepickerCheckout').pickadate({
onSet: function() {
$('.timepickerCheckout').click();
},
format: 'dd mmm, yyyy',
today: '',
clear: '',
close: '',
});
// TimePicker Checkout
$('.timepickerCheckout').pickatime({
onSet: function() {
var tempString = $('.datepickerCheckout').val() + " at " +
$('.timepickerCheckout').val();
$('.datepickerCheckout').val(tempString);
},
clear: '',
format: 'HH:i'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>
<label>from</label>
<input type="text" class="datepickerCheckin">
<label>to</label>
<input type="text" class="datepickerCheckout">

As per the documentation you provided you can set a date range with min max options. ie.
$('.datepicker').pickadate({
weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
min: new Date(2015,3,20),
max: new Date(2015,7,14)
})

Getting values from html inputs

I have an input element that is a range slider that I wanted to turn into a slider with a lower and an upper bound. This feature isn't implemented yet for range although it's being discussed. As you can see this is a popular question.
My issue is that the way I was retrieving the results of the slider no longer seems to work and I don't understand why. My original slider works like this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<label for="slider">
<input id="slider" type="range" value="0" oninput="sliderAmount.value = slider.value" min="0" max="100" step="1" />
stuff: <output name="sliderAmount" for="slider">0</output>
</label>
</form>
<div id="stuff"></div>
<script>
amt = document.getElementById("slider");
var amtChange = function () {
document.getElementById('stuff').innerHTML+='<div>'+amt.value+'</div>';
};
amt.onchange = amtChange;
</script>
</body>
</html>
Every time you slide the bar it updates the stuff div with the new result. I want to be able do the same thing with the jquery slider but update the stuff div with the range instead.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function () {
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
$("#amount").val(ui.values[0] + " - " + ui.values[1]);
}
});
$("#amount").val($("#slider-range").slider("values", 0) +
" - " + $("#slider-range").slider("values", 1));
});
</script>
</head>
<body>
<form>
<label for="amount">Price range:</label>
<input id="amount" type="text" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range"></div>
</form>
<div id="stuff"></div>
<script>
amt = document.getElementById("amount");
var amtChange = function () {
document.getElementById('stuff').innerHTML += '<div>' + amt.value + '</div>';
};
amt.onchange = amtChange;
</script>
</body>
</html>
However, this doesn't seem to be able to pull the range from the slider input. If I go into the console in Chrome for the jquery example I can type amt.value and it will return the value every time. What am I missing here?

Just trigger the change() method for input while changing it's value.
Try this:
DEMO: FIDDLE
$(function () {
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
$("#amount").val(ui.values[0] + " - " + ui.values[1]).change();
}
});
$("#amount").val($("#slider-range").slider("values", 0) +
" - " + $("#slider-range").slider("values", 1)).change();
});

You can use the change event of jQuery UI Range Slider. Use it and append updated changes to stuff like below.
$(function () {
var changes = '';
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
$("#amount").val(ui.values[0] + " - " + ui.values[1]);
},
change: function (event, ui) {
changes += '<div>' + ui.values[0] + " - " + ui.values[1] + '</div>';
$("#stuff").html(changes);
}
});
$("#amount").val($("#slider-range").slider("values", 0) +
" - " + $("#slider-range").slider("values", 1));
});

Set an end date based on start date using datepicker

I need to set a start date using datepicker (allows future dates only) and then set an end date based on chosen day from particular month where end date will be last day of chosen month from Start Date.
HTML code looks like:
<fieldset>
<label for="dataStart">Start Date</label>
<input type="text" style="width: 88px;" class="datepicker" id="dataStart" size="10" name="dataStart" />
</fieldset>
<fieldset>
<label for="dataEnd">End Date</label>
<input type="text" style="width: 88px;" class="end_date" id="dataEnd" size="10" name="dataEnd" value="<!-- last day of mont from dataStart -->" readonly />
</fieldset>
jQuery code:
function getLastDayOfYearAndMonth(year, month)
{
return(new Date((new Date(year, month + 1, 1)) - 1)).getDate();
}
$(document).ready(function() {
$("#dataStart").datepicker({
minDate: 1,
onSelect: function(theDate) {
var defalulDate = new Date();
defalulDate.getLastDayOfYearAndMonth(date.getFullYear(), date.getMonth()));
$("#dataEnd").datepicker(defaultDate: defalulDate);
},
beforeShow: function() {
$('#ui-datepicker-div').css('z-index', 9999);
},
dateFormat: 'mm/dd/yy'
});
});
Somehow I'm not able to get End Date functionality to work.

This is the working fiddle....
HTML
<p>From Date: <input type="text" id="fromDatePicker"></p>
<p>To Date: <input type="text" id="toDatePicker"></p>
JavaScript
var dateToday = new Date();
$(function() {
$( "#fromDatePicker" ).datepicker({
minDate: dateToday,
onSelect: function(selected,evnt) {
var date = $(this).datepicker('getDate'),
day = date.getDate(),
month = date.getMonth() + 1,
year = date.getFullYear();
updateToDate(day,month,year);
}
});
});
function updateToDate(day,month,year){
var myDate = new Date();
var updatedDay;
if(month==9|| month==4 ||month==6 || month==11){
updatedDay = 30;
}
else if (month==2){
updatedDay = 28;
}
else{
updatedDay = 31;
}
var prettyDate =month+ '/' +updatedDay + '/' +year;
$("#toDatePicker").val(prettyDate);
}
$(function() {
$( "#toDatePicker" ).datepicker({
minDate: dateToday
});
});

Below accurate version and w/o "February leap year" bug:
HTML:
<fieldset>
<label for="dataStart">Start Date</label>
<input type="text" style="width: 88px;" class="datepicker" id="dataStart" size="10" name="dataStart" />
</fieldset>
<fieldset>
<label for="dataEnd">End Date</label>
<input type="text" style="width: 88px;" class="end_date" id="dataEnd" size="10" name="dataEnd" value="" readonly />
</fieldset>
<div>Days counted between dates: <span id="calculated"></span></div>
jQuery:
$(document).ready(function() {
$("#dataStart").datepicker({
minDate: '+1d',
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy',
onSelect: function(date){
var dates = date.split('/');
var lastDate = new Date(dates[2], dates[0], 0);
var y = lastDate.getFullYear(), m = lastDate.getMonth(), d = lastDate.getDate();
m = ('0'+ (m+1)).slice(-2);
$('#dataEnd').val(m+'/'+d+'/'+y);
var start = $('#dataStart').datepicker('getDate');
$('#dataEnd').datepicker({dateFormat: 'mm/dd/yy'}).datepicker('setDate', m+'/'+d+'/'+y);
var end = $('#dataEnd').datepicker('getDate');
var days = ((end - start)/1000/60/60/24)+1;
$('#calculated').text(days);
}
});
});
and JSFiddle
PS.
Thanks to Sµßhrånil∂ from jQuery Forum for tips

datepicker simple event creation

All I want to do is use 5 text-boxes, a calender and a button to create an event on a date-picker calender.
Here is the format
I have read all about the .setDate() and .getDate() but I cannot get them to work. I have no experience with plugins only simple html and javascript. What is the datepicker object called and why does everyones code no have a name for their functions?
Anyone with experience with this plugin should be able to do this is in 5 seconds
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jQuery & jQueryUI Base - jsFiddle demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<style type='text/css'>
table.ui-datepicker-calendar tbody td.highlight > a {
background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80;
color: #363636;
border: 1px solid #FFDE2E;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var equip = document.getElementById('equipment').value;
var size = document.getElementById('size').value;
var surface = document.getElementById('surface').value;
var orderNumber = document.getElementById('orderNumber').value;
var responsible = document.getElementById('responsible').value;
var events = [
{ Title: "Equipment: " + equip + "\nSize: " + size + dated +
"\nRequired on Surface: " + surface + "\nWork Order Number: " + orderNumber + "\nResponsible: " + responsible, Date: new Date("05/13/2013") },
{ Title: "Dinner", Date: new Date("02/25/2011") },
{ Title: "Meeting with manager", Date: new Date("03/01/2011") }
];
$("div").datepicker({
beforeShowDay: function(date) {
var result = [true, '', null];
var matching = $.grep(events, function(event) {
return event.Date.valueOf() === date.valueOf();
});
if (matching.length) {
result = [true, 'highlight', null];
}
return result;
},
onSelect: function(dateText) {
var date,
selectedDate = new Date(dateText),
i = 0,
event = null;
while (i < events.length && !event) {
date = events[i].Date;
if (selectedDate.valueOf() === date.valueOf()) {
event = events[i];
}
i++;
}
if (event) {
alert(event.Title);
}
}
});
});//]]>
var dated = $( "div.selector" ).datepicker( "getDate" );
function alerter(form) {alert (form.size.value)}
function dog () {div.setDate("+2d");}
function submit(form){
var equip1 = form.equipment.value;
var size1 = form.size.value;
var surface1 = form.surface.value;
var orderNumber1 = form.orderNumber.value;
var responsible1 = form.responsible.value;
var inputDate1 = form.inputDate.value
var events = [
{ Title: "Equipment: " + equip1 + "\nSize: " + size1 +
"\nRequired on Surface: " + surface1 + "\nWork Order Number: " + orderNumber1 + "\nResponsible: " + responsible1, Date: new Date(inputDate1) },
{ Title: "Dinner", Date: new Date("05/25/2013") },
{ Title: "Meeting with manager", Date: new Date("03/01/2011") }
];
}
</script>
</head>
<body>
<FORM>
Equipment: <input type='text' id='equipment' /> <br />
Size: <input type='text' id='size' /> <br />
Required on Surface: <input type='checkbox' id='surface' /> <br />
Work Order Number: <input type='text' id='orderNumber' /> <br />
Responsible: <input type='text' id='responsible' /> <br />
<div id="datepicker"></div>
<button type="button" onclick="alerter(this.form)">Add Lowering Event</button><br>
</FORM>
</body>
</html>
Edited code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jQuery & jQueryUI Base - jsFiddle demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<style type='text/css'>
table.ui-datepicker-calendar tbody td.highlight > a {
background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80;
color: #363636;
border: 1px solid #FFDE2E;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var equip = document.getElementById('equipment').value;
var size = document.getElementById('size').value;
var surface = document.getElementById('surface').value;
var orderNumber = document.getElementById('orderNumber').value;
var responsible = document.getElementById('responsible').value;
var date = document.getElementById('dateds').value
var events = [
{ Title: "Equipment: " + equip + "\nSize: " + size + date +
"\nRequired on Surface: " + surface + "\nWork Order Number: " + orderNumber + "\nResponsible: " + responsible, Date: new Date(date) },
{ Title: "Dinner", Date: new Date("02/25/2011") },
{ Title: "Meeting with manager", Date: new Date("03/01/2011") }
];
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var result = [true, '', null];
var matching = $.grep(events, function(event) {
return event.Date.valueOf() === date.valueOf();
});
if (matching.length) {
result = [true, 'highlight', null];
}
return result;
},
onSelect: function(dateText) {
var date,
selectedDate = new Date(dateText),
i = 0,
event = null;
while (i < events.length && !event) {
date = events[i].Date;
if (selectedDate.valueOf() === date.valueOf()) {
event = events[i];
}
i++;
}
if (event) {
alert(event.Title);
}
}
});
});//]]>
var dated = $("#datepicker").datepicker( "getDate" );
function alerter() {alert (dated)}
function dog () {div.setDate("+2d");}
function submit(form){
var equip1 = form.equipment.value;
var size1 = form.size.value;
var surface1 = form.surface.value;
var orderNumber1 = form.orderNumber.value;
var responsible1 = form.responsible.value;
var inputDate1 = form.inputDate.value
var events = [
{ Title: "Equipment: " + equip1 + "\nSize: " + size1 +
"\nRequired on Surface: " + surface1 + "\nWork Order Number: " + orderNumber1 + "\nResponsible: " + responsible1, Date: new Date(inputDate1) },
{ Title: "Dinner", Date: new Date("05/25/2013") },
{ Title: "Meeting with manager", Date: new Date("03/01/2011") }
];
}
</script>
</head>
<body>
<FORM>
Equipment: <input type='text' id='equipment' /> <br />
Size: <input type='text' id='size' /> <br />
Required on Surface: <input type='checkbox' id='surface' /> <br />
Work Order Number: <input type='text' id='orderNumber' /> <br />
Responsible: <input type='text' id='responsible' /> <br />
Date: <input type="text" id="dateds" /></p>
<div id="datepicker"></div>
<button type="button" onclick="alerter()">Add Lowering Event</button><br>
</FORM>
</body>
</html>

$("div").datepicker and $("div.selector").datepicker should both be $("#datepicker").datepicker. The first would attach a datepicker to every DIV on your page, the second doesn't work because you don't have a DIV with class selector.
Normally a datepicker is attached to an <input> element in the form, so when you submit the form the selected date will be submitted. Since you're putting it in a DIV, you could add an <input type="hidden"> element to the form:
<input type="hidden" name="date" id="date">
and add the following option to the datepicker:
altField: "date",
Using named versus anonymous functions is mainly a stylistic choice. If a short function is only used in one place, such as the onSelect option or an AJAX callback, it's common to put it inline as an anonymous function.