Calendar refactors:

- Remove some more jQueryUI.datepicker usages

api/js/etemplate/Et2Date/Et2Date.ts

@@ -239,7 +239,7 @@ export function formatDate(date : Date, options = {dateFormat: ""}) : string
 		m: (date.getUTCMonth() < 9 ? "0" : "") + (date.getUTCMonth() + 1),
 		Y: "" + date.getUTCFullYear()
 	}
-	let re = new RegExp(Object.keys(replace_map).join("|"), "gi");
+	let re = new RegExp(Object.keys(replace_map).join("|"), "g");
 	_value = dateformat.replace(re, function(matched)
 	{
 		return replace_map[matched];

calendar/js/app.ts

@@ -51,8 +51,10 @@ import {et2_checkbox} from "../../api/js/etemplate/et2_widget_checkbox";
 import {et2_grid} from "../../api/js/etemplate/et2_widget_grid";
 import {Et2Textbox} from "../../api/js/etemplate/Et2Textbox/Et2Textbox";
 import "./SidemenuDate";
-import {parseDate} from "../../api/js/etemplate/Et2Date/Et2Date";
+import {formatDate, formatTime, parseDate} from "../../api/js/etemplate/Et2Date/Et2Date";
-import {EGW_KEY_PAGE_UP,EGW_KEY_PAGE_DOWN} from "../../api/js/egw_action/egw_action_constants";
+import {EGW_KEY_PAGE_DOWN, EGW_KEY_PAGE_UP} from "../../api/js/egw_action/egw_action_constants";
+import {nm_action} from "../../api/js/etemplate/et2_extension_nextmatch_actions";
+import flatpickr from "flatpickr";
 
 /**
  * UI for calendar
@@ -3337,10 +3339,12 @@ export class CalendarApp extends EgwApp
 			if (state.name)
 			{
 				// 'blank' is the special name for no filters, send that instead of the nice translated name
-				state.state.favorite = jQuery.isEmptyObject(state) || jQuery.isEmptyObject(state.state||state.filter) ? 'blank' : state.name.replace(/[^A-Za-z0-9-_]/g, '_');
+				state.state.favorite = jQuery.isEmptyObject(state) || jQuery.isEmptyObject(state.state || state.filter) ? 'blank' : state.name.replace(/[^A-Za-z0-9-_]/g, '_');
 				// set date for "No Filter" (blank) favorite to todays date
-				if (state.state.favorite == 'blank')
+				if(state.state.favorite == 'blank')
-					state.state.date = jQuery.datepicker.formatDate('yymmdd', new Date);
+				{
+					state.state.date = formatDate(new Date, {dateFormat: 'yymmdd'});
+				}
 			}
 			menuaction = 'calendar.calendar_uilist.listview';
 			state.state.ajax = 'true';
@@ -4022,7 +4026,7 @@ export class CalendarApp extends EgwApp
 
 			if (display_day)
 			{
-				range = jQuery.datepicker.formatDate('DD',first_format)+(datefmt[0] != 'd' ? ' ' : ', ');
+				range = flatpickr.formatDate(first_format, 'l') + (datefmt[0] != 'd' ? ' ' : ', ');
 			}
 			for (var i = 0; i < 5; i += 2)
 			{
@@ -4034,7 +4038,7 @@ export class CalendarApp extends EgwApp
 						{
 							if (!month_before_day)
 							{
-								range += jQuery.datepicker.formatDate('MM',first_format);
+								range += flatpickr.formatDate(first_format, "F");
 							}
 							if (first.getFullYear() != last.getFullYear() && datefmt[0] != 'Y')
 							{
@@ -4042,7 +4046,7 @@ export class CalendarApp extends EgwApp
 							}
 							if (display_time)
 							{
-								range += ' '+jQuery.datepicker.formatDate(dateTimeFormat(timefmt),first_format);
+								range += ' ' + formatTime(first_format);
 							}
 							if (!last)
 							{
@@ -4057,14 +4061,14 @@ export class CalendarApp extends EgwApp
 
 							if (month_before_day)
 							{
-								range += jQuery.datepicker.formatDate('MM',last_format);
+								range += flatpickr.formatDate(last_format, 'l');
 							}
 						}
 						else if (last)
 						{
 							if (display_time)
 							{
-								range += ' '+jQuery.datepicker.formatDate(dateTimeFormat(timefmt),last_format);
+								range += ' ' + formatTime(last_format);
 							}
 							if(last)
 							{
@@ -4078,7 +4082,7 @@ export class CalendarApp extends EgwApp
 						break;
 					case 'm':
 					case 'M':
-						range += ' '+jQuery.datepicker.formatDate('MM',month_before_day || !last ? first_format : last_format) + ' ';
+						range += ' ' + flatpickr.formatDate(month_before_day || !last ? first_format : last_format, "l") + ' ';
 						break;
 					case 'Y':
 						if (datefmt[0] != 'm')
@@ -4090,7 +4094,7 @@ export class CalendarApp extends EgwApp
 			}
 			if (display_time && last)
 			{
-				 range += ' '+jQuery.datepicker.formatDate(dateTimeFormat(timefmt),last_format);
+				range += ' ' + formatTime(last_format);
 			}
 			if (datefmt[4] == 'Y' && datefmt[0] == 'm')
 			{
@@ -4123,7 +4127,7 @@ export class CalendarApp extends EgwApp
 				d.setUTCDate(d.getUTCDate() + 2);
 			}
 
-			return jQuery.datepicker.iso8601Week(new Date(d.valueOf() + d.getTimezoneOffset() * 60 * 1000));
+			return flatpickr.formatDate(new Date(d.valueOf() + d.getTimezoneOffset() * 60 * 1000), "W");
 		},
 		start_of_week: function(date)
 		{

calendar/js/et2_widget_event.ts

@@ -26,6 +26,7 @@ import {egw} from "../../api/js/jsapi/egw_global";
 import {et2_selectbox} from "../../api/js/etemplate/et2_widget_selectbox";
 import {et2_container} from "../../api/js/etemplate/et2_core_baseWidget";
 import {Et2Dialog} from "../../api/js/etemplate/Et2Dialog/Et2Dialog";
+import {formatTime} from "../../api/js/etemplate/Et2Date/Et2Date";
 
 /**
  * Class for a single event, displayed in either the timegrid or planner view
@@ -392,21 +393,12 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached
 				else
 				{
 					// @ts-ignore
-						const start_time = jQuery.datepicker.formatTime(
+					const start_time = formatTime(event.start).trim();
-								egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
-								{
-										hour: event.start_m / 60,
-										minute: event.start_m % 60,
-										seconds: 0,
-										timezone: 0
-								},
-								{"ampm": (egw.preference("timeformat") === "12")}
-						).trim();
 
 					this.body
 						.html('<span class="calendar_calEventTitle">' + title + '</span>')
 						.append('<span class="calendar_calTimespan">' + start_time + '</span>');
-						if (this.options.value.description.trim())
+					if(this.options.value.description.trim())
 					{
 						this.body
 							.append('<p>' + egw.htmlspecialchars(this.options.value.description) + '</p>');
@@ -768,26 +760,9 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached
 						if (event['end_m'] > 24 * 60)
 						{
 								// @ts-ignore
-								timespan = jQuery.datepicker.formatTime(
+							timespan = formatTime(event.start)
-										egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
-										{
-												hour: event.start_m / 60,
-												minute: event.start_m % 60,
-												seconds: 0,
-												timezone: 0
-										},
-										{"ampm": (egw.preference("timeformat") === "12")}
 								// @ts-ignore
-								).trim() + ' - ' + jQuery.datepicker.formatTime(
+								.trim() + ' - ' + formatTime(event.end).trim();
-										egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
-										{
-												hour: event.end_m / 60,
-												minute: event.end_m % 60,
-												seconds: 0,
-												timezone: 0
-										},
-										{"ampm": (egw.preference("timeformat") === "12")}
-								).trim();
 						}
 						else
 						{
@@ -802,28 +777,10 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached
 						duration = Math.floor(duration / 60) + this.egw().lang('h') + (duration % 60 ? duration % 60 : '');
 
 						// @ts-ignore
-						timespan = jQuery.datepicker.formatTime(
+					timespan = formatTime(event.start).trim();
-								egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
-								{
-										hour: event.start_m / 60,
-										minute: event.start_m % 60,
-										seconds: 0,
-										timezone: 0
-								},
-								{"ampm": (egw.preference("timeformat") === "12")}
-						).trim();
 
 						// @ts-ignore
-						timespan += ' - ' + jQuery.datepicker.formatTime(
+					timespan += ' - ' + formatTime(event.end);
-								egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
-								{
-										hour: event.end_m / 60,
-										minute: event.end_m % 60,
-										seconds: 0,
-										timezone: 0
-								},
-								{"ampm": (egw.preference("timeformat") === "12")}
-						).trim();
 
 						timespan += ': ' + duration;
 				}

calendar/js/et2_widget_planner.ts

@@ -31,7 +31,7 @@ import {CalendarApp} from "./app";
 import {sprintf} from "../../api/js/egw_action/egw_action_common.js";
 import {et2_dataview_grid} from "../../api/js/etemplate/et2_dataview_view_grid";
 import {et2_selectbox} from "../../api/js/etemplate/et2_widget_selectbox";
-import {formatDate} from "../../api/js/etemplate/Et2Date/Et2Date";
+import {formatDate, formatTime} from "../../api/js/etemplate/Et2Date/Et2Date";
 import {holidays} from "../../api/js/etemplate/Et2Date/Holidays";
 
 /**
@@ -1771,18 +1771,9 @@ export class et2_calendar_planner extends et2_calendar_view implements et2_IDeta
 	 */
 	_drag_helper(element, position ,height)
 	{
-		var time = this._get_time_from_position(position.left, position.top);
+		let time = this._get_time_from_position(position.left, position.top);
 		element.dropEnd = time;
-		var formatted_time = jQuery.datepicker.formatTime(
+		let formatted_time = formatTime(time);
-			egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
-			{
-				hour: time.getUTCHours(),
-				minute: time.getUTCMinutes(),
-				seconds: 0,
-				timezone: 0
-			},
-			{"ampm": (egw.preference("timeformat") === "12")}
-		);
 
 		element.innerHTML = '<div class="calendar_d-n-d_timeCounter"><span class="calendar_timeDemo" >'+formatted_time+'</span></div>';
 

calendar/js/et2_widget_timegrid.ts

@@ -27,7 +27,7 @@ import {egw_getObjectManager, egwActionObject} from "../../api/js/egw_action/egw
 import {et2_compileLegacyJS} from "../../api/js/etemplate/et2_core_legacyJSFunctions";
 import {Et2Dialog} from "../../api/js/etemplate/Et2Dialog/Et2Dialog";
 import {EGW_AI_DRAG_OUT, EGW_AI_DRAG_OVER} from "../../api/js/egw_action/egw_action_constants.js";
-import {formatDate} from "../../api/js/etemplate/Et2Date/Et2Date";
+import {formatDate, formatTime, parseTime} from "../../api/js/etemplate/Et2Date/Et2Date";
 
 /**
  * Class which implements the "calendar-timegrid" XET-Tag for displaying a span of days
@@ -426,16 +426,7 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 			else
 			{
 				// @ts-ignore
-				time = jQuery.datepicker.formatTime(
+				time = formatTime(parseTime(element.dropEnd.attr('data-hour') + ":" + element.dropEnd.attr('data-minute')));
-					egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
-					{
-						hour: element.dropEnd.attr('data-hour'),
-						minute: element.dropEnd.attr('data-minute'),
-						seconds: 0,
-						timezone: 0
-					},
-					{"ampm": (egw.preference("timeformat") == "12")}
-				);
 			}
 			element.innerHTML = '<div style="font-size: 1.1em; text-align:center; font-weight: bold; height:100%;"><span class="calendar_timeDemo" >'+time+'</span></div>';
 		}
@@ -852,16 +843,7 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
 			html += '<div class="calendar_calTimeRow' + working_hours + '" style="height: '+(100/row_count)+'%;">';
 			// show time for full hours, always for 45min interval and at least on every 3 row
 			// @ts-ignore
-			var time = jQuery.datepicker.formatTime(
+			let time = formatTime(parseTime((t / 60) + ":" + (t % 60)));
-					egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
-					{
-						hour: t / 60,
-						minute: t % 60,
-						seconds: 0,
-						timezone: 0
-					},
-					{"ampm": (egw.preference("timeformat") === "12")}
-				);
 
 			var time_label = (typeof show[granularity] === 'undefined' ? t % 60 === 0 : show[granularity].indexOf(t % 60) !== -1) ? time : '';
 			if(time_label && egw.preference("timeformat") == "12" && time_label.split(':')[0] < 10)