Gallery
PreviousJS Calendar Range Picker
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender,EventArgs e)
{
// Demonstrates a fully functional calendar date range picker with blackout dates loaded from csv file.
Chart.Type = ChartType.Calendar;
Chart.TempDirectory = "temp";
Chart.Size = "300X250";
Chart.Debug = false;
Chart.DefaultElement.ToolTip = "";//disable tooltip
Chart.LegendBox.Visible = false;
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.JS.Calendar.StartDate = new DateTime(2020, 1, 1);
Chart.JS.Calendar.EndDate = new DateTime(2020, 12, 31);
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month;
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = true;
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = "";//disable tooltip
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.Settings.Add("toolbar_items_backward_position", "top left");
Chart.JS.Settings.Add("toolbar_items_backward_fill", "white");
Chart.JS.Settings.Add("toolbar_items_backward_icon_name", "material/hardware/keyboard-arrow-left");
Chart.JS.Settings.Add("toolbar_items_backward_events_click", "js:function(){var d = new Date(curDate);zoomTo(d.setMonth(d.getMonth() - 1));}");
Chart.JS.Settings.Add("toolbar_items_forward_position", "top right");
Chart.JS.Settings.Add("toolbar_items_forward_fill", "white");
Chart.JS.Settings.Add("toolbar_items_forward_icon_name", "material/hardware/keyboard-arrow-right");
Chart.JS.Settings.Add("toolbar_items_forward_events_click", "js:function(){var d = new Date(curDate);zoomTo(d.setMonth(d.getMonth() + 1));}");
Chart.JS.Settings.Add("toolbar_items_reset_events_click", "js:function(){reset();}");
Chart.JS.Settings.Add("toolbar_items_reset_boxVisible", "false");
Chart.JS.Settings.Add("toolbar_items_reset_visible", "false");
Chart.JS.Settings.Add("toolbar_items_reset_label_text", "Clear Dates");
Chart.JS.Settings.Add("toolbar_items_reset_label_color", "#e34e2f");
Chart.JS.Settings.Add("toolbar_items_reset_position", "bottom right");
Chart.JS.Settings.Add("toolbar_items_reset_margin", "5");
// Default Point Event
Chart.JS.Settings.Add("defaultPoint.events_click", "js:pointClick");
Chart.JS.Settings.Add("defaultPoint.events_mouseOver", "js:pointOver");
Chart.DefaultElement.Outline.Width = 0;
Chart.JS.Settings.Add("defaultPoint.states_hover.color", "'#cfd8dc'");
Annotation an = new Annotation("January 2020");
an.Position = new Point(105,0);
an.Background.Color = Color.White;
an.ClearColors();
Chart.Annotations.Add(an);
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near;//vertical
Chart.DefaultElement.SmartLabel.Alignment = LabelAlignment.OutsideTop;// StringAlignment.Near;
Chart.ChartArea.ClearColors();
Chart.ChartArea.Padding = 0;
Chart.DefaultElement.ShowValue = true;
Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.Palette = new Color[] { };//prevent setting DNC default palette
Chart.YAxis.Line.Visible = false;
}
</script>
<style type="text/css">/*CSS*/
.inputEl{
width: 112px;
display: inline-block;
font-family: arial;
font-size: 14px;
background-color: #f7f7f7;
border: 0px solid gray;
border-radius: 4px;
height: 22px;
}
.inputsWrapper {
margin-left:32px;
height:23px;
border: 1px solid gray;
border-radius:5px;
padding: 5px;
width: 275px;
}
#picker{
display: none;
margin-top: 5px;
margin-left: -9px;
z-index: 1;
position: absolute;
width: 368px;
}
#pickerContainer{
width:350px;
margin-left:10px;
padding: 9px;
}
.opened{ background-color: #ffffff; height: 275px;}
.activeEl{ background-color: #c6d4ff;}</style>
<script type="text/javascript">
/**
* Chart event handlers
*/
function pointClick() {
var point = this;
var clickedDate = point.tokenValue('%date');
if (picking === 'end') {
datesPicked.end = clickedDate;
if (pickedCount() < 2) {
highlightInput(elementRefs.startDate);
picking = 'start';
} else { picking = 'none'; highlightDates(); }
} else {
datesPicked.start = clickedDate;
highlightInput(elementRefs.endDate);
highlightDates();
picking = 'end';
}
updateInputs();
if (picking == 'none') {
//Clear highligh
highlightInput();
closePicker();
}
updateAvailability(myJSC);
updateReset();
//Disable any default point click behavior.
return false;
}
function pointOver() {
var point = this;
var pointDate = point.tokenValue('%date');
//If another point is hovered while only one date is selected, update the highlight
if (pickedCount() === 1) { highlightDates(pointDate); }
}
/**
* Picked dates utils
*/
function reset() {
datesPicked = { start: undefined, end: undefined };
picking = 'start';
highlightInput(elementRefs.startDate);
updateInputs();
highlightDates();
updateAvailability(myJSC);
updateReset();
}
function pickedDates() {
var dates = [];
datesPicked.start && dates.push(datesPicked.start);
datesPicked.end && dates.push(datesPicked.end);
return dates;
}
function pickedCount() {
var count = 0;
datesPicked.end && count++;
datesPicked.start && count++;
return count;
}
</script>
</head>
<body>
<div id="pickerContainer" >
<div class="inputsWrapper">
<input id="startDate" autocomplete="off" class="inputEl" type="text" value="Check in" onkeyup="updateDatePicker(this)" onclick="inputClicked(this)" />
<input id="endDate" autocomplete="off" class="inputEl" style="margin-left:30px" type="text" value="Check out" onkeyup="updateDatePicker(this)" onclick="inputClicked(this)"/>
</div>
<div id="picker">
<dnc:Chart ID="Chart" runat="server" style="max-width: 300px;height: 300px;margin: 0px auto;"></dnc:Chart>
</div>
<div>
</div>
</div>
<script type="text/javascript" src="temp/JSC/icons/material/hardware/keyboard-arrow-left.js"></script>
<script type="text/javascript" src="temp/JSC/icons/material/hardware/keyboard-arrow-right.js"></script>
<script type="text/javascript">
var titleAnnotation = undefined,
dateRange = [new Date('1/1/2020'), new Date('12/31/2020')],
curDate = dateRange[0],
picking;
</script>
<script type="text/javascript">
//Note: html elements must be rendered before making references..
var elementRefs = {
startDate: document.getElementById('startDate'),
endDate: document.getElementById('endDate'),
pickerContainer: document.getElementById('pickerContainer'),
picker: document.getElementById('picker'),
},
datesPicked = { start: undefined, end: undefined },
selectorColor = '#5264cb',
//Blackout dates loaded from csv file.
bookingData = undefined;
initPicker();
function initPicker() {
//chart = JSC.chart('chartDiv', chartConfig);
JSC.fetch('./../../data/resources/hotelReservations.csv').then(function (response) {
if (response.ok) {
response.text().then(function (text) {
var rows = text.split(/\r?\n/);
var dataRows = rows.map(function (r, i) { return r.split(','); });
//Remove header row
dataRows.shift();
return dataRows;
}).then(function (data) {
bookingData = data.slice(0);
updateAvailability(myJSC);
});
} else { console.error('Problem loading csv data.') }
});
elementRefs.pickerContainer.addEventListener('click', function (ev) { ev.stopPropagation(); });
window.addEventListener('click', function () { highlightInput(); closePicker(); });
}
/**
* Date Utils
*/
function toDate(v) { return new Date(v); }
function formatTitle(date) {
return new Date(date).toLocaleDateString('en', { month: 'long', year: 'numeric' })
}
function addOneDay(date) {
var d = toDate(date);
return new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1).getTime();
}
function formatDate(d) { return JSC.formatDate(d, 'd') }
/**
* Update chart functions
*/
//Update possible checkout dates
function updateAvailability(chartRef) {
var isRepickingFirst = picking === 'start' && !datesPicked.end;
if (!isRepickingFirst && picking !== 'none' && pickedCount() !== 0) {
var setDate = datesPicked[picking == 'start' ? 'end' : 'start'];
//If a startDate is selected, generate points for all days within range and make only possible dates clickable
var cur = dateRange[0].getTime();
var endDate = dateRange[1].getTime();
var points = [];
var firstBookedAfter, firstBookedBefore = 0;
//Find first booked date before and after setDates
for (var i = 0; i < bookingData.length; i++) {
var bookingStart = toDate(bookingData[i][0]);
var bookingEnd = toDate(bookingData[i][1]);
if (bookingEnd < setDate && bookingEnd > firstBookedBefore) { firstBookedBefore = bookingEnd; }
if (bookingStart > setDate) {
firstBookedAfter = bookingStart;
break;
}
}
//Generate point configs
while (cur < endDate) {
var clickable = true;
if (picking == 'end') {
if (cur < setDate) { clickable = false; } else if (cur >= firstBookedAfter) { clickable = false; }
} else {
if (cur > setDate) { clickable = false; } else if (cur < firstBookedBefore) { clickable = false; }
}
points.push(clickable ? { date: cur } : {
date: cur,
hatch: {
style: 'light-upward-diagonal',
color: '#b6b6b6'
},
label_style: {
textDecoration: 'line-through',
color: '#cdcdcd'
},
mouseTracking: false
});
cur = addOneDay(cur);
}
myJSC.options({ series: [{ points: points }] });
} else {
myJSC.options({
series: [{
points: bookingData.map(function (row) {
return {
date: [row[0], row[1]],
hatch: {
style: 'light-upward-diagonal',
color: '#b6b6b6'
},
label_style: {
textDecoration: 'line-through',
color: '#cdcdcd'
},
mouseTracking: false
};
})
}]
})
}
}
function getHighlightCfg(hoverDate) {
var cfg, dateVal, dates = pickedDates(),
isFinalRange = dates.length === 2;
//Include hoverDate in highlight range
hoverDate && dates.push(hoverDate) && dates.sort();
cfg = {
id: 'selection',
fill: isFinalRange ? selectorColor : '#c3d2ff',
outline: { color: selectorColor, dashStyle: isFinalRange ? 'solid' : 'dash' }
};
//Highlight date or range
dateVal = dates.length === 1 ? dates[0] : { range: dates }
if (dates.length) { cfg.pattern = { date: dateVal }; }
return cfg;
}
function highlightDates(hoverDate) {
var hl, //dates = selectedDates,
updateOptions = hoverDate ? { animation: { duration: 0 } } : {};
hl = myJSC.highlights('selection');
if (pickedCount() || hoverDate) {
let config = getHighlightCfg(hoverDate);
if (hl) { hl.options(config, updateOptions); } else {
myJSC.highlights.add(config, updateOptions);
}
} else if (hl) { hl.remove(); }
}
function zoomTo(d) {
var d = new Date(d);
if (d >= dateRange[0] && d <= dateRange[1] && d.getMonth() != curDate.getMonth()) {
titleAnnotation = titleAnnotation || myJSC.annotations(0);
titleAnnotation.options({ label_text: formatTitle(d) }, { animation: { duration: 0 } });
myJSC.zoom(d);
curDate = d;
}
}
function updateReset() {
myJSC.uiItems('reset').options({ visible: !!pickedCount() });
}
/**
* Update HTML Elements
*/
function updateInputs() {
elementRefs.startDate.value = datesPicked.start ? formatDate(datesPicked.start) : 'Check in';
elementRefs.endDate.value = datesPicked.end ? formatDate(datesPicked.end) : 'Check out';
}
function updateDatePicker(el) {
if (el === startDate) {
datesPicked.start = new Date(elementRefs.startDate.value).getTime();
} else {
datesPicked.end = new Date(elementRefs.endDate.value).getTime();
}
highlightDates();
}
function inputClicked(el) {
clickedInput = el;
picking = el === elementRefs.startDate ? 'start' : 'end';
highlightInput(el);
openPicker();
//Zoom chart to date in clicked text input.
zoomTo(el.value);
updateAvailability(myJSC);
}
function highlightInput(el) {
if (el !== elementRefs.startDate) {
elementRefs.startDate.classList.remove('activeEl');
}
if (el !== elementRefs.endDate) {
elementRefs.endDate.classList.remove('activeEl');
}
if (el) { el.classList.add('activeEl'); }
}
function openPicker() {
elementRefs.picker.style.display = "block";
elementRefs.pickerContainer.classList.add('opened');
}
function closePicker() {
elementRefs.picker && (elementRefs.picker.style.display = "none");
elementRefs.pickerContainer.classList.remove('opened');
}
</script>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates a fully functional calendar date range picker with blackout dates loaded from csv file.
Chart.Type = ChartType.Calendar
Chart.TempDirectory = "temp"
Chart.Size = "300X250"
Chart.Debug = False
Chart.DefaultElement.ToolTip = "" 'disable tooltip
Chart.LegendBox.Visible = False
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.Calendar.StartDate = New DateTime(2020, 1, 1)
Chart.JS.Calendar.EndDate = New DateTime(2020, 12, 31)
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month
Chart.JS.Calendar.DefaultEdgeElement.ShowValue = True
Chart.JS.Calendar.DefaultEdgeElement.ToolTip = "" 'disable tooltip
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.Settings.Add("toolbar_items_backward_position", "top left")
Chart.JS.Settings.Add("toolbar_items_backward_fill", "white")
Chart.JS.Settings.Add("toolbar_items_backward_icon_name", "material/hardware/keyboard-arrow-left")
Chart.JS.Settings.Add("toolbar_items_backward_events_click", "js:function(){var d = new Date(curDate);zoomTo(d.setMonth(d.getMonth() - 1));}")
Chart.JS.Settings.Add("toolbar_items_forward_position", "top right")
Chart.JS.Settings.Add("toolbar_items_forward_fill", "white")
Chart.JS.Settings.Add("toolbar_items_forward_icon_name", "material/hardware/keyboard-arrow-right")
Chart.JS.Settings.Add("toolbar_items_forward_events_click", "js:function(){var d = new Date(curDate);zoomTo(d.setMonth(d.getMonth() + 1));}")
Chart.JS.Settings.Add("toolbar_items_reset_events_click", "js:function(){reset();}")
Chart.JS.Settings.Add("toolbar_items_reset_boxVisible", "false")
Chart.JS.Settings.Add("toolbar_items_reset_visible", "false")
Chart.JS.Settings.Add("toolbar_items_reset_label_text", "Clear Dates")
Chart.JS.Settings.Add("toolbar_items_reset_label_color", "#e34e2f")
Chart.JS.Settings.Add("toolbar_items_reset_position", "bottom right")
Chart.JS.Settings.Add("toolbar_items_reset_margin", "5")
' Default Point Event
Chart.JS.Settings.Add("defaultPoint.events_click", "js:pointClick")
Chart.JS.Settings.Add("defaultPoint.events_mouseOver", "js:pointOver")
Chart.DefaultElement.Outline.Width = 0
Chart.JS.Settings.Add("defaultPoint.states_hover.color", "'#cfd8dc'")
Dim an As Annotation = New Annotation("January 2020")
an.Position = New Point(105,0)
an.Background.Color = Color.White
an.ClearColors()
Chart.Annotations.Add(an)
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near 'vertical
Chart.DefaultElement.SmartLabel.Alignment = LabelAlignment.OutsideTop ' StringAlignment.Near;
Chart.ChartArea.ClearColors()
Chart.ChartArea.Padding = 0
Chart.DefaultElement.ShowValue = True
Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.Palette = New Color() { } 'prevent setting DNC default palette
Chart.YAxis.Line.Visible = False
End Sub
</script>
<style type="text/css">/*CSS*/
.inputEl{
width: 112px;
display: inline-block;
font-family: arial;
font-size: 14px;
background-color: #f7f7f7;
border: 0px solid gray;
border-radius: 4px;
height: 22px;
}
.inputsWrapper {
margin-left:32px;
height:23px;
border: 1px solid gray;
border-radius:5px;
padding: 5px;
width: 275px;
}
#picker{
display: none;
margin-top: 5px;
margin-left: -9px;
z-index: 1;
position: absolute;
width: 368px;
}
#pickerContainer{
width:350px;
margin-left:10px;
padding: 9px;
}
.opened{ background-color: #ffffff; height: 275px;}
.activeEl{ background-color: #c6d4ff;}</style>
<script type="text/javascript">
/**
* Chart event handlers
*/
function pointClick() {
var point = this;
var clickedDate = point.tokenValue('%date');
if (picking === 'end') {
datesPicked.end = clickedDate;
if (pickedCount() < 2) {
highlightInput(elementRefs.startDate);
picking = 'start';
} else { picking = 'none'; highlightDates(); }
} else {
datesPicked.start = clickedDate;
highlightInput(elementRefs.endDate);
highlightDates();
picking = 'end';
}
updateInputs();
if (picking == 'none') {
//Clear highligh
highlightInput();
closePicker();
}
updateAvailability(myJSC);
updateReset();
//Disable any default point click behavior.
return false;
}
function pointOver() {
var point = this;
var pointDate = point.tokenValue('%date');
//If another point is hovered while only one date is selected, update the highlight
if (pickedCount() === 1) { highlightDates(pointDate); }
}
/**
* Picked dates utils
*/
function reset() {
datesPicked = { start: undefined, end: undefined };
picking = 'start';
highlightInput(elementRefs.startDate);
updateInputs();
highlightDates();
updateAvailability(myJSC);
updateReset();
}
function pickedDates() {
var dates = [];
datesPicked.start && dates.push(datesPicked.start);
datesPicked.end && dates.push(datesPicked.end);
return dates;
}
function pickedCount() {
var count = 0;
datesPicked.end && count++;
datesPicked.start && count++;
return count;
}
</script>
</head>
<body>
<div id="pickerContainer" >
<div class="inputsWrapper">
<input id="startDate" autocomplete="off" class="inputEl" type="text" value="Check in" onkeyup="updateDatePicker(this)" onclick="inputClicked(this)" />
<input id="endDate" autocomplete="off" class="inputEl" style="margin-left:30px" type="text" value="Check out" onkeyup="updateDatePicker(this)" onclick="inputClicked(this)"/>
</div>
<div id="picker">
<dnc:Chart ID="Chart" runat="server" style="max-width: 300px;height: 300px;margin: 0px auto;"></dnc:Chart>
</div>
<div>
</div>
</div>
<script type="text/javascript" src="temp/JSC/icons/material/hardware/keyboard-arrow-left.js"></script>
<script type="text/javascript" src="temp/JSC/icons/material/hardware/keyboard-arrow-right.js"></script>
<script type="text/javascript">
var titleAnnotation = undefined,
dateRange = [new Date('1/1/2020'), new Date('12/31/2020')],
curDate = dateRange[0],
picking;
</script>
<script type="text/javascript">
//Note: html elements must be rendered before making references..
var elementRefs = {
startDate: document.getElementById('startDate'),
endDate: document.getElementById('endDate'),
pickerContainer: document.getElementById('pickerContainer'),
picker: document.getElementById('picker'),
},
datesPicked = { start: undefined, end: undefined },
selectorColor = '#5264cb',
//Blackout dates loaded from csv file.
bookingData = undefined;
initPicker();
function initPicker() {
//chart = JSC.chart('chartDiv', chartConfig);
JSC.fetch('./../../data/resources/hotelReservations.csv').then(function (response) {
if (response.ok) {
response.text().then(function (text) {
var rows = text.split(/\r?\n/);
var dataRows = rows.map(function (r, i) { return r.split(','); });
//Remove header row
dataRows.shift();
return dataRows;
}).then(function (data) {
bookingData = data.slice(0);
updateAvailability(myJSC);
});
} else { console.error('Problem loading csv data.') }
});
elementRefs.pickerContainer.addEventListener('click', function (ev) { ev.stopPropagation(); });
window.addEventListener('click', function () { highlightInput(); closePicker(); });
}
/**
* Date Utils
*/
function toDate(v) { return new Date(v); }
function formatTitle(date) {
return new Date(date).toLocaleDateString('en', { month: 'long', year: 'numeric' })
}
function addOneDay(date) {
var d = toDate(date);
return new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1).getTime();
}
function formatDate(d) { return JSC.formatDate(d, 'd') }
/**
* Update chart functions
*/
//Update possible checkout dates
function updateAvailability(chartRef) {
var isRepickingFirst = picking === 'start' && !datesPicked.end;
if (!isRepickingFirst && picking !== 'none' && pickedCount() !== 0) {
var setDate = datesPicked[picking == 'start' ? 'end' : 'start'];
//If a startDate is selected, generate points for all days within range and make only possible dates clickable
var cur = dateRange[0].getTime();
var endDate = dateRange[1].getTime();
var points = [];
var firstBookedAfter, firstBookedBefore = 0;
//Find first booked date before and after setDates
for (var i = 0; i < bookingData.length; i++) {
var bookingStart = toDate(bookingData[i][0]);
var bookingEnd = toDate(bookingData[i][1]);
if (bookingEnd < setDate && bookingEnd > firstBookedBefore) { firstBookedBefore = bookingEnd; }
if (bookingStart > setDate) {
firstBookedAfter = bookingStart;
break;
}
}
//Generate point configs
while (cur < endDate) {
var clickable = true;
if (picking == 'end') {
if (cur < setDate) { clickable = false; } else if (cur >= firstBookedAfter) { clickable = false; }
} else {
if (cur > setDate) { clickable = false; } else if (cur < firstBookedBefore) { clickable = false; }
}
points.push(clickable ? { date: cur } : {
date: cur,
hatch: {
style: 'light-upward-diagonal',
color: '#b6b6b6'
},
label_style: {
textDecoration: 'line-through',
color: '#cdcdcd'
},
mouseTracking: false
});
cur = addOneDay(cur);
}
myJSC.options({ series: [{ points: points }] });
} else {
myJSC.options({
series: [{
points: bookingData.map(function (row) {
return {
date: [row[0], row[1]],
hatch: {
style: 'light-upward-diagonal',
color: '#b6b6b6'
},
label_style: {
textDecoration: 'line-through',
color: '#cdcdcd'
},
mouseTracking: false
};
})
}]
})
}
}
function getHighlightCfg(hoverDate) {
var cfg, dateVal, dates = pickedDates(),
isFinalRange = dates.length === 2;
//Include hoverDate in highlight range
hoverDate && dates.push(hoverDate) && dates.sort();
cfg = {
id: 'selection',
fill: isFinalRange ? selectorColor : '#c3d2ff',
outline: { color: selectorColor, dashStyle: isFinalRange ? 'solid' : 'dash' }
};
//Highlight date or range
dateVal = dates.length === 1 ? dates[0] : { range: dates }
if (dates.length) { cfg.pattern = { date: dateVal }; }
return cfg;
}
function highlightDates(hoverDate) {
var hl, //dates = selectedDates,
updateOptions = hoverDate ? { animation: { duration: 0 } } : {};
hl = myJSC.highlights('selection');
if (pickedCount() || hoverDate) {
let config = getHighlightCfg(hoverDate);
if (hl) { hl.options(config, updateOptions); } else {
myJSC.highlights.add(config, updateOptions);
}
} else if (hl) { hl.remove(); }
}
function zoomTo(d) {
var d = new Date(d);
if (d >= dateRange[0] && d <= dateRange[1] && d.getMonth() != curDate.getMonth()) {
titleAnnotation = titleAnnotation || myJSC.annotations(0);
titleAnnotation.options({ label_text: formatTitle(d) }, { animation: { duration: 0 } });
myJSC.zoom(d);
curDate = d;
}
}
function updateReset() {
myJSC.uiItems('reset').options({ visible: !!pickedCount() });
}
/**
* Update HTML Elements
*/
function updateInputs() {
elementRefs.startDate.value = datesPicked.start ? formatDate(datesPicked.start) : 'Check in';
elementRefs.endDate.value = datesPicked.end ? formatDate(datesPicked.end) : 'Check out';
}
function updateDatePicker(el) {
if (el === startDate) {
datesPicked.start = new Date(elementRefs.startDate.value).getTime();
} else {
datesPicked.end = new Date(elementRefs.endDate.value).getTime();
}
highlightDates();
}
function inputClicked(el) {
clickedInput = el;
picking = el === elementRefs.startDate ? 'start' : 'end';
highlightInput(el);
openPicker();
//Zoom chart to date in clicked text input.
zoomTo(el.value);
updateAvailability(myJSC);
}
function highlightInput(el) {
if (el !== elementRefs.startDate) {
elementRefs.startDate.classList.remove('activeEl');
}
if (el !== elementRefs.endDate) {
elementRefs.endDate.classList.remove('activeEl');
}
if (el) { el.classList.add('activeEl'); }
}
function openPicker() {
elementRefs.picker.style.display = "block";
elementRefs.pickerContainer.classList.add('opened');
}
function closePicker() {
elementRefs.picker && (elementRefs.picker.style.display = "none");
elementRefs.pickerContainer.classList.remove('opened');
}
</script>
</body>
</html>
- Sample FilenameJsCalendarRangePicker.aspx
- Version9.1
- Uses DatabaseNo