calendar/calendar-preact.js

/**
 * Calendar Script
 * Creates a calendar widget which can be used to select the date more easily than using just a text box
 *
 * Modified: http://yourcmc.ru/git/vitalif-js/calendar
 * Version: 2019-07-18
 * License: MIT-like, http://www.openjs.com/license.php
 *
 * Example:
 * <input type="text" name="date" id="date" />
 * <script type="text/javascript">
 *     Calendar.set("date");
 * </script>
 */

import preact from 'preact';
/** @jsx preact.h */

export class Calendar extends preact.Component
{
	// Configuration
	static defaultProps = {
		month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
		close_label: 'Закрыть',
		weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"],
		weekdayIds: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
		sunday: 6,
		selectboxes: false, // true: use selectboxes for year and month, false: show months and years in table
		years: { min: -70, max: 10 }, // range of displayed years if selectboxes==true
		format: 'd.m.Y', // either d.m.Y or Y-m-d, other formats are not supported
		// Today's date
		today: new Date(),
		start: 'days',
	}

	render(props, state)
	{
		return (<div class="calendar-box" style={{display: "block"}}>
			{props.mode == 'months' ? this.renderMonths(props) : null}
			{props.mode == 'years' ? this.renderYears(props) : null}
			{props.mode == 'days' ? this.renderDays(props) : null}
			<a class="calendar-cancel" onclick={() => Calendar.hideCalendar()}>{props.close_label}</a>
		</div>);
	}

	componentDidMount()
	{
		this.componentDidUpdate();
		this.props.input.addEventListener('blur', () =>
		{
			if (!Calendar.stopBlur || Calendar.stopBlur < Date.now()-200)
				Calendar.hideCalendar();
		});
	}

	componentDidUpdate()
	{
		// Position the div in the correct location...
		var input = this.props.input;
		var div = Calendar.box;
		var xy = getOffset(input);
		var height = input.clientHeight||input.offsetHeight;
		var ww = document.body.clientWidth||document.documentElement.clientWidth;
		var wh = document.body.clientHeight||document.documentElement.clientHeight;
		if (xy.left-1+div.offsetWidth > ww)
			div.style.left = (ww-div.offsetWidth-1)+"px";
		else
			div.style.left = (xy.left-1)+"px";
		if (div.offsetHeight + xy.top+height-1 >= wh &&
			xy.top-div.offsetHeight >= 0)
			div.style.top = (xy.top-div.offsetHeight)+'px';
		else
			div.style.top = (xy.top+height-1)+"px";
	}

	/// Called when the user clicks on a date in the calendar.
	selectDate(year, month, day)
	{
		var i = this.props.input;
		var t = i.value.split(/\s+/, 2)[1]||'';
		month = Number(month)+1;
		if (this.props.callback)
		{
			// Safari does not understand new Date('YYYY-MM-DD HH:MM:SS')
			t = t ? t.split(/:/) : [ 0, 0, 0 ];
			t = new Date(year-0, month-1, day-0, t[0]-0, t[1]-0, t[2]-0);
			var c = this.props.callback;
			c(new Date(t));
		}
		else
		{
			if (month < 10)
				month = '0'+month;
			if (day < 10)
				day = '0'+day;
			t = (this.format == 'Y-m-d' ? year + '-' + month + '-' + day : day + '.' + month + '.' + year) + (t ? ' '+t : '');
			i.value = t;
			if ("Event" in window)
			{
				var evt = document.createEvent('Event');
				evt.initEvent('change', true, true);
				i.dispatchEvent(evt);
			}
			else
				i.fireEvent("onchange");
		}
		Calendar.hideCalendar();
	}

	showMonths(year)
	{
		this.props.onChangeProps({ year, mode: 'months' });
	}

	showYears(year)
	{
		this.props.onChangeProps({ year, mode: 'years' });
	}

	showDays(year, month)
	{
		this.props.onChangeProps({ year, month, mode: 'days' });
	}

	renderMonths(props)
	{
		var year = props.year;
		var cur_y = props.today.getFullYear();
		var cur_m = props.today.getMonth();
		var sel_m = props.selected.getFullYear() == year ? props.selected.getMonth() : -1;
		var months = [ [ 0, 1, 2 ], [ 3, 4, 5 ], [ 6, 7, 8 ], [ 9, 10, 11 ] ];
		return (<table>
			<tr><th colspan='4' class='calendar-title'>
				<a href='javascript:void(0)' onclick={() => this.showMonths(year-1)} title={(year-1)} class='prev'></a>
				<a href='javascript:void(0)' onclick={() => this.showYears(year)}>{year}</a>
				<a href='javascript:void(0)' onclick={() => this.showMonths(year+1)} title={(year+1)} class='next'></a>
			</th></tr>
			{months.map(g => (<tr>
				{g.map(i => (
					<td class={'months '+
						(year < cur_y || year == cur_y && i < cur_m ? 'past' :
						(year > cur_y || year == cur_y && i > cur_m ? 'future' : 'today'))
						+ (i == sel_m ? ' selected' : '')}>
						<a href='javascript:void(0)' onclick={() => this.showDays(year, i)}>
							{props.month_names[i]}
						</a>
					</td>
				))}
			</tr>))}
		</table>);
	}

	renderYears({ selected, today, year })
	{
		var beg = year & ~15;
		var cur_y = today.getFullYear();
		var sel_y = selected.getFullYear();
		return (<table>
			<tr><th colspan='4' class='calendar-title'>
				<a href='javascript:void(0)' onclick={() => this.showYears(year-16)} title={(beg-16)+" - "+(beg-1)} class='prev'></a>
				<b>{beg+' - '+(beg+15)}</b>
				<a href='javascript:void(0)' onclick={() => this.showYears(year+16)} title={(beg+16)+" - "+(beg+31)} class='next'></a>
			</th></tr>
			{[0, 1, 2, 3].map(r => (
				<tr>
				{[0, 1, 2, 3].map(j => {
					var i = beg + j + r*4;
					var class_name = (i < cur_y ? 'past' : (i > cur_y ? 'future' : 'today'))
						+ (i == sel_y ? ' selected' : '');
					return (<td class={'years '+class_name}>
						<a href='javascript:void(0)' onclick={() => this.showMonths(i)}>{i}</a>
					</td>);
				})}
				</tr>
			))}
		</table>);
	}

	_yearOptions(min, max, year)
	{
		var r = [];
		for (var i = min; i < max; i++)
			r.push(<option value={i} selected={i == year}>{i}</option>);
		return r;
	}

	/// Creates a calendar with the date given in the argument as the selected date.
	renderDays(props)
	{
		var { year, month, selected, selectboxes, sunday, today, month_names } = props;

		// Display the table
		var next_month = month+1;
		var next_month_year = year;
		if (next_month >= 12)
		{
			next_month = 0;
			next_month_year++;
		}

		var previous_month = month-1;
		var previous_month_year = year;
		if (previous_month < 0)
		{
			previous_month = 11;
			previous_month_year--;
		}

		var current_year = today.getFullYear();

		// Get the first day of this month
		var first_day = new Date(year, month, 1);
		var start_day = (first_day.getDay()+sunday)%7;

		var d = 1;
		var flag = 0;

		// Leap year support
		var days_in_this_month = (month == 2
			? (!(year % 4) && ((year % 100) || !(year % 400)) ? 29 : 28)
			: ((month < 7) == !(month & 1) ? 31 : 30));

		var yea = today.getFullYear();
		var all_diff = (year - yea) || (month - today.getMonth());
		var sel_day = selected && year == selected.getFullYear() && month == selected.getMonth() ? selected.getDate() : -1;

		return (<table>
			<tr><th colspan='7' class='calendar-title'>
				<a href='javascript:void(0)'
					onclick={() => this.showDays(previous_month_year, previous_month)}
					title={month_names[previous_month]+" "+previous_month_year} class='prev'></a>
				{!selectboxes ?
					[
						<a href='javascript:void(0)' onclick={() => this.showMonths(year, month)}>{month_names[month]}</a>,
						<a href='javascript:void(0)' onclick={() => this.showYears(year)}>{year}</a>
					] : [
						<select name='calendar-month' class='calendar-month' onchange={(e) => this.showDays(year, e.target.value)}>
							{month_names.map((name, i) => (
								<option value={i} selected={(i == month)}>{name}</option>
							))}
						</select>,
						<select name='calendar-year' class='calendar-year' onchange={(e) => this.showDays(e.target.value, month)}>
							{this._yearOptions(current_year+props.years.min, current_year+props.years.max, year)}
						</select>
					]
				}
				<a href='javascript:void(0)'
					onclick={() => this.showDays(next_month_year,next_month)}
					title={props.month_names[next_month]+" "+next_month_year} class='next'></a>
			</th></tr>
			<tr class='header'>
				{props.weekdays.map(name => (<td>{name}</td>))}
			</tr>
			{[0, 1, 2, 3, 4].map(i => (
				(i*7 < days_in_this_month+start_day ? <tr>
					{[0, 1, 2, 3, 4, 5, 6].map(j =>
					{
						var d = i*7+j+1-start_day;
						var visible = (i > 0 || j >= start_day) && (d <= days_in_this_month);
						if (visible)
						{
							var class_name = 'days';
							var diff = all_diff || (d - today.getDate());
							if (diff < 0)
								class_name += ' past';
							else if (!diff)
								class_name += ' today';
							else
								class_name += ' future';
							if (d == sel_day)
								class_name += ' selected';
							class_name += ' ' + props.weekdayIds[j].toLowerCase();
							return (<td class={class_name}>
								<a href="javascript:void(0)" onclick={() => this.selectDate(year, month, d)}>{d}</a>
							</td>);
						}
						else
							return (<td class='days'>&nbsp;</td>);
					})}
				</tr> : null)
			))}
		</table>);
	}

	/// Display the calendar - if a date exists in the input box, that will be selected in the calendar.
	static showCalendar(input, options)
	{
		// Show the calendar with the date in the input as the selected date
		var props = { ...Calendar.defaultProps, ...options };
		props.selected = new Date();
		var date_in_input = input.value.replace(/\s+.*$/, ''); // Remove time
		if (date_in_input)
		{
			// date format is HARDCODE
			var selected_date = false;
			var date_parts = date_in_input.split("-");
			if (date_parts.length == 3)
			{
				// Y-m-d
				date_parts[1]--; // Month starts with 0
				selected_date = new Date(date_parts[0], date_parts[1], date_parts[2]);
			}
			else if (date_parts.length == 1)
			{
				date_parts = date_in_input.split('.');
				if (date_parts.length == 3)
				{
					// d.m.Y
					date_parts[1]--; // Month starts with 0
					selected_date = new Date(date_parts[2], date_parts[1], date_parts[0]);
				}
			}
			if (selected_date && !isNaN(selected_date.getFullYear()))
			{
				// Valid date.
				props.selected = selected_date;
			}
		}
		props.today = new Date();
		props.year = props.selected.getFullYear();
		props.month = props.selected.getMonth();
		props.mode = props.start;
		props.input = input;
		props.onChangeProps = (h) =>
		{
			props = { ...props, ...h };
			preact.render(<Calendar {...props} />, Calendar.box.parentNode, Calendar.box);
		};
		Calendar.init();
		Calendar.box.style.display = "block";
		Calendar.stopBlur = Date.now();
		preact.render(<Calendar {...props} />, Calendar.box.parentNode, Calendar.box);
	}

	/// Hides the currently show calendar.
	static hideCalendar()
	{
		if (!Calendar.box)
			return;
		Calendar.box.style.display = "none";
	}

	/// Setup a text input box to be a calendar box.
	static set(input_or_id, options)
	{
		if (typeof input_or_id == 'string')
		{
			input_or_id = document.getElementById(input_or_id);
		}
		if (!input_or_id)
		{
			return; // If the input field is not there, exit.
		}
		input_or_id.addEventListener('focus', function(ev)
		{
			Calendar.showCalendar(input_or_id, options);
		});
		// FIXME: Add change listener to enable interactive date selection in calendar while typing
	}

	// Will be called once when the first input is set.
	static init()
	{
		if (!Calendar.box || !Calendar.box.parentNode)
		{
			var div = document.createElement('div');
			if (!Calendar.box)
				Calendar.box = div;
			div.className = "calendar-box";
			div.addEventListener("mousedown", function(ev)
			{
				ev = ev || window.event;
				if (ev.stopPropagation)
					ev.stopPropagation();
				else
					ev.cancelBubble = true;
				Calendar.stopBlur = Date.now();
				return true;
			});
			document.getElementsByTagName("body")[0].insertBefore(div, document.getElementsByTagName("body")[0].firstChild);
			if (!Calendar.addedListener)
			{
				document.addEventListener("mousedown", function() { Calendar.hideCalendar(); });
				Calendar.addedListener = true;
			}
		}
	}
}

window.Calendar = Calendar;

function getOffsetRect(elem)
{
	var box = elem.getBoundingClientRect();

	var body = document.body;
	var docElem = document.documentElement;

	var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
	var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
	var clientTop = docElem.clientTop || body.clientTop || 0;
	var clientLeft = docElem.clientLeft || body.clientLeft || 0;
	var top = box.top + scrollTop - clientTop;
	var left = box.left + scrollLeft - clientLeft;

	return { top: Math.round(top), left: Math.round(left) };
}

function getOffsetSum(elem)
{
	var top = 0, left = 0;
	while(elem)
	{
		top = top + parseInt(elem.offsetTop);
		left = left + parseInt(elem.offsetLeft);
		elem = elem.offsetParent;
	}
	return { top: top, left: left };
}

function getOffset(elem)
{
	if (elem.getBoundingClientRect)
		return getOffsetRect(elem);
	else
		return getOffsetSum(elem);
}