fullcalendar

author: polo <ordipolo@gmx.fr> 2025-06-23 03:33:38 +0200
committer: polo <ordipolo@gmx.fr> 2025-06-23 03:33:38 +0200
commit: cebc19ef236aac2968d2ffccfcff9b975b63fa8d (patch)
tree: 5b8e08045a45063475f533bfae4b4524720fe7bd /public/js/fullcalendar/examples/timegrid-views-modal.html
parent: 8cf5ac1abf9e2a6134cb82d4582aecaa99b1331a (diff)
download: cms-cebc19ef236aac2968d2ffccfcff9b975b63fa8d.tar.gz
cms-cebc19ef236aac2968d2ffccfcff9b975b63fa8d.tar.bz2
cms-cebc19ef236aac2968d2ffccfcff9b975b63fa8d.zip
1 files changed, 180 insertions, 0 deletions
diff --git a/public/js/fullcalendar/examples/timegrid-views-modal.html b/public/js/fullcalendar/examples/timegrid-views-modal.html
new file mode 100644
index 0000000..3b4a0fc
--- /dev/null
+++ b/public/js/fullcalendar/examples/timegrid-views-modal.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='utf-8' />
+<script src='../dist/index.global.js'></script>
+<script>
+  /*
+  From https://github.com/fullcalendar/fullcalendar/issues/5026
+  */
+  document.addEventListener('DOMContentLoaded', function() {
+    var calendarOptions = {
+      initialDate: '2023-01-12',
+      initialView: 'timeGridWeek',
+      nowIndicator: true,
+      headerToolbar: {
+        left: 'prev,next today',
+        center: 'title',
+        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
+      },
+      navLinks: true, // can click day/week names to navigate views
+      editable: true,
+      selectable: true,
+      selectMirror: true,
+      dayMaxEvents: true, // allow "more" link when too many events
+      events: [
+        {
+          title: 'All Day Event',
+          start: '2023-01-01',
+        },
+        {
+          title: 'Long Event',
+          start: '2023-01-07',
+          end: '2023-01-10'
+        },
+        {
+          groupId: 999,
+          title: 'Repeating Event',
+          start: '2023-01-09T16:00:00'
+        },
+        {
+          groupId: 999,
+          title: 'Repeating Event',
+          start: '2023-01-16T16:00:00'
+        },
+        {
+          title: 'Conference',
+          start: '2023-01-11',
+          end: '2023-01-13'
+        },
+        {
+          title: 'Meeting',
+          start: '2023-01-12T10:30:00',
+          end: '2023-01-12T12:30:00'
+        },
+        {
+          title: 'Lunch',
+          start: '2023-01-12T12:00:00'
+        },
+        {
+          title: 'Meeting',
+          start: '2023-01-12T14:30:00'
+        },
+        {
+          title: 'Happy Hour',
+          start: '2023-01-12T17:30:00'
+        },
+        {
+          title: 'Dinner',
+          start: '2023-01-12T20:00:00'
+        },
+        {
+          title: 'Birthday Party',
+          start: '2023-01-13T07:00:00'
+        },
+        {
+          title: 'Click for Google',
+          url: 'http://google.com/',
+          start: '2023-01-28'
+        }
+      ]
+    };
+    var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), calendarOptions);
+    calendar.render();
+    var calendar2 = new FullCalendar.Calendar(document.getElementById('calendar2'), calendarOptions);
+    calendar2.render();
+    /*
+    Modal
+    */
+    var modal = document.querySelector('.modal');
+    var modalTrigger = document.querySelector('.modal-trigger');
+    var modalOverlay = document.querySelector('.modal-overlay');
+    modalTrigger.addEventListener('click', function() {
+      modal.classList.add('is-visible');
+      calendar2.updateSize();
+    });
+    modalOverlay.addEventListener('click', function() {
+      modal.classList.remove('is-visible');
+    });
+  });
+</script>
+<style>
+  body {
+    margin: 10px;
+    padding: 0;
+    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
+    font-size: 14px;
+  }
+  #calendar {
+    max-width: 1100px;
+    margin: 0 auto;
+  }
+  .modal {
+    display: none;
+    position: absolute;
+    z-index: 10000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .modal.is-visible {
+    display: block;
+  }
+  .modal-overlay {
+    position: fixed;
+    z-index: 10;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: hsla(0, 0%, 0%, 0.5);
+  }
+  .modal-wrapper {
+    position: absolute;
+    z-index: 9999;
+    top: 6em;
+    left: 50%;
+    width: 600px;
+    margin-left: -16em;
+    background-color: #fff;
+    box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
+  }
+  .modal-content {
+    padding: 1em;
+  }
+</style>
+</head>
+<body>
+  <button class='modal-trigger'>Show modal</button>
+  <div id='calendar'></div>
+  <div class='modal'>
+    <div class='modal-overlay'></div>
+    <div class='modal-wrapper'>
+      <div class='modal-content'>
+        <div id='calendar2'></div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
author	polo <ordipolo@gmx.fr>	2025-06-23 03:33:38 +0200
committer	polo <ordipolo@gmx.fr>	2025-06-23 03:33:38 +0200
commit	cebc19ef236aac2968d2ffccfcff9b975b63fa8d (patch)
tree	5b8e08045a45063475f533bfae4b4524720fe7bd /public/js/fullcalendar/examples/timegrid-views-modal.html
parent	8cf5ac1abf9e2a6134cb82d4582aecaa99b1331a (diff)
download	cms-cebc19ef236aac2968d2ffccfcff9b975b63fa8d.tar.gz cms-cebc19ef236aac2968d2ffccfcff9b975b63fa8d.tar.bz2 cms-cebc19ef236aac2968d2ffccfcff9b975b63fa8d.zip

diff --git a/public/js/fullcalendar/examples/timegrid-views-modal.html b/public/js/fullcalendar/examples/timegrid-views-modal.html new file mode 100644 index 0000000..3b4a0fc --- /dev/null +++ b/public/js/fullcalendar/examples/timegrid-views-modal.html
@@ -0,0 +1,180 @@
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<meta charset='utf-8' />
	5	<script src='../dist/index.global.js'></script>
	6	<script>
	7
	8	/*
	9	From https://github.com/fullcalendar/fullcalendar/issues/5026
	10	*/
	11
	12	document.addEventListener('DOMContentLoaded', function() {
	13	var calendarOptions = {
	14	initialDate: '2023-01-12',
	15	initialView: 'timeGridWeek',
	16	nowIndicator: true,
	17	headerToolbar: {
	18	left: 'prev,next today',
	19	center: 'title',
	20	right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
	21	},
	22	navLinks: true, // can click day/week names to navigate views
	23	editable: true,
	24	selectable: true,
	25	selectMirror: true,
	26	dayMaxEvents: true, // allow "more" link when too many events
	27	events: [
	28	{
	29	title: 'All Day Event',
	30	start: '2023-01-01',
	31	},
	32	{
	33	title: 'Long Event',
	34	start: '2023-01-07',
	35	end: '2023-01-10'
	36	},
	37	{
	38	groupId: 999,
	39	title: 'Repeating Event',
	40	start: '2023-01-09T16:00:00'
	41	},
	42	{
	43	groupId: 999,
	44	title: 'Repeating Event',
	45	start: '2023-01-16T16:00:00'
	46	},
	47	{
	48	title: 'Conference',
	49	start: '2023-01-11',
	50	end: '2023-01-13'
	51	},
	52	{
	53	title: 'Meeting',
	54	start: '2023-01-12T10:30:00',
	55	end: '2023-01-12T12:30:00'
	56	},
	57	{
	58	title: 'Lunch',
	59	start: '2023-01-12T12:00:00'
	60	},
	61	{
	62	title: 'Meeting',
	63	start: '2023-01-12T14:30:00'
	64	},
	65	{
	66	title: 'Happy Hour',
	67	start: '2023-01-12T17:30:00'
	68	},
	69	{
	70	title: 'Dinner',
	71	start: '2023-01-12T20:00:00'
	72	},
	73	{
	74	title: 'Birthday Party',
	75	start: '2023-01-13T07:00:00'
	76	},
	77	{
	78	title: 'Click for Google',
	79	url: 'http://google.com/',
	80	start: '2023-01-28'
	81	}
	82	]
	83	};
	84
	85	var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), calendarOptions);
	86	calendar.render();
	87
	88	var calendar2 = new FullCalendar.Calendar(document.getElementById('calendar2'), calendarOptions);
	89	calendar2.render();
	90
	91	/*
	92	Modal
	93	*/
	94
	95	var modal = document.querySelector('.modal');
	96	var modalTrigger = document.querySelector('.modal-trigger');
	97	var modalOverlay = document.querySelector('.modal-overlay');
	98
	99	modalTrigger.addEventListener('click', function() {
	100	modal.classList.add('is-visible');
	101	calendar2.updateSize();
	102	});
	103	modalOverlay.addEventListener('click', function() {
	104	modal.classList.remove('is-visible');
	105	});
	106	});
	107
	108	</script>
	109	<style>
	110
	111	body {
	112	margin: 10px;
	113	padding: 0;
	114	font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
	115	font-size: 14px;
	116	}
	117
	118	#calendar {
	119	max-width: 1100px;
	120	margin: 0 auto;
	121	}
	122
	123	.modal {
	124	display: none;
	125	position: absolute;
	126	z-index: 10000;
	127	top: 0;
	128	left: 0;
	129	width: 100%;
	130	height: 100%;
	131	}
	132
	133	.modal.is-visible {
	134	display: block;
	135	}
	136
	137	.modal-overlay {
	138	position: fixed;
	139	z-index: 10;
	140	top: 0;
	141	left: 0;
	142	width: 100%;
	143	height: 100%;
	144	background: hsla(0, 0%, 0%, 0.5);
	145	}
	146
	147	.modal-wrapper {
	148	position: absolute;
	149	z-index: 9999;
	150	top: 6em;
	151	left: 50%;
	152	width: 600px;
	153	margin-left: -16em;
	154	background-color: #fff;
	155	box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
	156	}
	157
	158	.modal-content {
	159	padding: 1em;
	160	}
	161
	162	</style>
	163	</head>
	164	<body>
	165
	166	<button class='modal-trigger'>Show modal</button>
	167
	168	<div id='calendar'></div>
	169
	170	<div class='modal'>
	171	<div class='modal-overlay'></div>
	172	<div class='modal-wrapper'>
	173	<div class='modal-content'>
	174	<div id='calendar2'></div>
	175	</div>
	176	</div>
	177	</div>
	178
	179	</body>
	180	</html>