@brightspace-ui/core 3.44.2 → 3.45.0

package/components/calendar/calendar.js

@@ -40,11 +40,26 @@ function getCalendarData() {
 	return calendarData;
 }
 
+function getInitialFocusDate(selectedValue, minValue, maxValue) {
+	if (selectedValue) return getDateFromISODate(selectedValue);
+	else return getDateFromISODate(getClosestValidDate(minValue, maxValue, false));
+}
+
 export function checkIfDatesEqual(date1, date2) {
 	if (!date1 || !date2) return false;
 	return date1.getTime() === date2.getTime();
 }
 
+export function getMinMaxDatesInView(selectedValue, minValue, maxValue) {
+	getCalendarData();
+	const date = getInitialFocusDate(selectedValue, minValue, maxValue);
+	const dates = getDatesInMonthArray(date.getMonth(), date.getFullYear());
+	return {
+		maxValue: dates[dates.length - 1][6],
+		minValue: dates[0][0]
+	};
+}
+
 export function getDatesInMonthArray(shownMonth, shownYear) {
 	const dates = [];
 	const numDays = getNumberOfDaysInMonth(shownMonth, shownYear);
@@ -135,6 +150,11 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 	static get properties() {
 		return {
+			/**
+			 * Additional info for each day (ex. events on [{"date": "2024-09-19"}])
+			 * @type {Array}
+			 */
+			dayInfos: { type: Array, attribute: 'day-infos' },
 			/**
 			 * Unique label text for calendar (necessary if multiple calendars on page)
 			 * @type {string}
@@ -145,19 +165,16 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			 * @type {string}
 			 */
 			maxValue: { attribute: 'max-value', reflect: true, type: String },
-
 			/**
 			 * Minimum valid date that could be selected by a user
 			 * @type {string}
 			 */
 			minValue: { attribute: 'min-value', reflect: true, type: String },
-
 			/**
 			 * Currently selected date
 			 * @type {string}
 			 */
 			selectedValue: { type: String, attribute: 'selected-value' },
-
 			/**
 			 * ACCESSIBILITY: Summary of the calendar used by screen reader users for identifying the calendar and/or summarizing its purpose
 			 * @type {string}
@@ -395,6 +412,24 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				font-size: 1rem;
 				font-weight: 700;
 			}
+
+			.d2l-calendar-date-day-info::after {
+				background-color: var(--d2l-color-celestine);
+				border-radius: 3px;
+				bottom: 4px;
+				content: "";
+				display: inline-block;
+				height: 6px;
+				position: absolute;
+				width: 6px;
+			}
+			.d2l-calendar-date-selected.d2l-calendar-date-day-info::after {
+				bottom: 2px;
+			}
+			td:focus .d2l-calendar-date-day-info::after {
+				bottom: 0;
+			}
+
 		`];
 	}
 
@@ -435,9 +470,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	}
 
 	render() {
-		if (this._shownMonth === undefined || !this._shownYear) {
-			return nothing;
-		}
+		if (this._shownMonth === undefined || !this._shownYear) return nothing;
 
 		const weekdayHeaders = calendarData.daysOfWeekIndex.map((index) => html`
 			<th>
@@ -450,20 +483,28 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		const dates = getDatesInMonthArray(this._shownMonth, this._shownYear);
 		const dayRows = dates.map((week) => {
 			const weekHtml = week.map((day, index) => {
+
 				const disabled = !isDateInRange(day, getDateFromISODate(this.minValue), getDateFromISODate(this.maxValue));
 				const focused = checkIfDatesEqual(day, this._focusDate);
 				const selected = this.selectedValue ? checkIfDatesEqual(day, getDateFromISODate(this.selectedValue)) : false;
+
+				const year = day.getFullYear();
+				const month = day.getMonth();
+				const date = day.getDate();
+
+				const hasDayInfo = !!this.dayInfos?.find(dayInfo => checkIfDatesEqual(day, getDateFromISODate(dayInfo.date)));
+
 				const classes = {
 					'd2l-calendar-date': true,
+					'd2l-calendar-date-day-info': hasDayInfo,
 					'd2l-calendar-date-initial': this._isInitialFocusDate,
 					'd2l-calendar-date-selected': selected,
 					'd2l-calendar-date-today': checkIfDatesEqual(day, this._today)
 				};
-				const year = day.getFullYear();
-				const month = day.getMonth();
-				const date = day.getDate();
+
 				const weekday = calendarData.descriptor.calendar.days.long[calendarData.daysOfWeekIndex[index]];
-				const description = `${weekday} ${date} ${formatDate(day, { format: 'monthYear' })}`;
+				const dayInfoText = hasDayInfo ? `${this.localize('components.calendar.hasEvents')} ` : '';
+				const description = `${dayInfoText}${weekday} ${date} ${formatDate(day, { format: 'monthYear' })}`;
 				return html`
 					<td
 						aria-selected="${selected ? 'true' : 'false'}"
@@ -487,6 +528,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 			return html`<tr>${weekHtml}</tr>`;
 		});
+
 		const summary = this.summary ? html`<caption class="d2l-offscreen">${this.summary}</caption>` : '';
 		const calendarClasses = {
 			'd2l-calendar': true,
@@ -501,6 +543,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		const heading = formatDate(new Date(this._shownYear, this._shownMonth, 1), { format: 'monthYear' });
 		const regionLabel = this.label ? `${this.label}. ${heading}` : heading;
 		const role = this._dialog ? 'dialog' : undefined;
+
 		return html`
 			<div role="region" aria-label="${regionLabel}">
 				<div class="${classMap(calendarClasses)}" role="${ifDefined(role)}">
@@ -532,6 +575,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				</div>
 			</div>
 		`;
+
 	}
 
 	updated(changedProperties) {
@@ -551,6 +595,26 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		});
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+
+		// don't dispatch d2l-calendar-view-change when _shownYear and _shownMonth are being initialized
+		if (changedProperties.get('_shownYear') === undefined && changedProperties.get('_shownMonth') === undefined) return;
+
+		const dates = getDatesInMonthArray(this._shownMonth, this._shownYear);
+
+		/** Dispatched when the calender view changes. "e.detail" provides the year and month in view. */
+		this.dispatchEvent(new CustomEvent('d2l-calendar-view-change', {
+			bubbles: false,
+			composed: false,
+			detail: {
+				maxValue: dates[dates.length - 1][6],
+				minValue: dates[0][0]
+			}
+		}));
+
+	}
+
 	async focus() {
 		if (this._dialog) {
 			await this.updateComplete;
@@ -585,9 +649,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	}
 
 	_getInitialFocusDate() {
-		let date;
-		if (this.selectedValue) date = getDateFromISODate(this.selectedValue);
-		else date = getDateFromISODate(getClosestValidDate(this.minValue, this.maxValue, false));
+		const date = getInitialFocusDate(this.selectedValue, this.minValue, this.maxValue);
 		this._shownMonth = date.getMonth();
 		this._shownYear = date.getFullYear();
 		return date;

package/components/calendar/demo/calendar.html

@@ -7,6 +7,22 @@
 		<script type="module">
 			import '../../demo/demo-page.js';
 			import '../calendar.js';
+
+			window._allEvents = [
+				{ date: '2024-08-21' },
+				{ date: '2024-08-22' },
+				{ date: '2024-09-04' },
+				{ date: '2024-09-19' },
+				{ date: '2024-09-20' },
+				{ date: '2024-09-20' },
+				{ date: '2024-09-28' },
+				{ date: '2024-09-30' },
+				{ date: '2024-10-02' },
+				{ date: '2024-10-30' },
+				{ date: '2024-10-31' },
+				{ date: '2024-11-01' },
+				{ date: '2024-11-11' }
+			];
 		</script>
 	</head>
 	<body unresolved>
@@ -33,6 +49,25 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Calendar (with events)</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-calendar id="eventsCalendar" selected-value="2024-09-16"></d2l-calendar>
+					<script type="module">
+						import { getDateFromISODate, isDateInRange } from '../../../helpers/dateTime.js';
+						import { getMinMaxDatesInView } from '../calendar.js';
+
+						const getEvents = datesInView => {
+							return window._allEvents.filter(event => isDateInRange(getDateFromISODate(event.date), datesInView.minValue, datesInView.maxValue));
+						};
+
+						const calendar = document.querySelector('#eventsCalendar');
+						calendar.dayInfos = getEvents(getMinMaxDatesInView(calendar.selectedValue));
+						calendar.addEventListener('d2l-calendar-view-change', e => calendar.dayInfos = getEvents(e.detail));
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/custom-elements.json

@@ -813,6 +813,11 @@
       "path": "./components/calendar/calendar.js",
       "description": "A component can be used to display a responsively sized calendar that allows for date selection.",
       "attributes": [
+        {
+          "name": "day-infos",
+          "description": "Additional info for each day (ex. events on [{\"date\": \"2024-09-19\"}])",
+          "type": "Array"
+        },
         {
           "name": "label",
           "description": "Unique label text for calendar (necessary if multiple calendars on page)",
@@ -840,6 +845,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "dayInfos",
+          "attribute": "day-infos",
+          "description": "Additional info for each day (ex. events on [{\"date\": \"2024-09-19\"}])",
+          "type": "Array"
+        },
         {
           "name": "label",
           "attribute": "label",
@@ -872,6 +883,10 @@
         }
       ],
       "events": [
+        {
+          "name": "d2l-calendar-view-change",
+          "description": "Dispatched when the calender view changes. \"e.detail\" provides the year and month in view."
+        },
         {
           "name": "d2l-calendar-selected",
           "description": "Dispatched when a date is selected through click, space, or enter. \"e.detail.date\" is in ISO 8601 calendar date format (\"YYYY-MM-DD\")."

package/lang/ar.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "إغلاق التنبيه",
 	"components.breadcrumbs.breadcrumb": "شريط التنقل",
 	"components.button-add.addItem": "إضافة عنصر",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "لم يتم التحديد.",
 	"components.calendar.selected": "تم التحديد.",
 	"components.calendar.show": "إظهار {month}",

package/lang/cy.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Cau Hysbysiad",
 	"components.breadcrumbs.breadcrumb": "Briwsionyn Bara",
 	"components.button-add.addItem": "Ychwanegu Eitem",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "Heb ei Ddewis.",
 	"components.calendar.selected": "Wedi'i Ddewis.",
 	"components.calendar.show": "Dangos {month}",

package/lang/da.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Luk besked",
 	"components.breadcrumbs.breadcrumb": "Brødkrumme",
 	"components.button-add.addItem": "Tilføj element",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "Ikke valgt.",
 	"components.calendar.selected": "Valgt.",
 	"components.calendar.show": "Vis {month}",

package/lang/de.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Benachrichtigung schließen",
 	"components.breadcrumbs.breadcrumb": "Brotkrümelnavigation",
 	"components.button-add.addItem": "Element hinzufügen",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "Nicht ausgewählt.",
 	"components.calendar.selected": "Ausgewählt.",
 	"components.calendar.show": "{month} anzeigen",

package/lang/en-gb.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Close Alert",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "Not Selected.",
 	"components.calendar.selected": "Selected.",
 	"components.calendar.show": "Show {month}",

package/lang/en.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Close Alert",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "Not Selected.",
 	"components.calendar.selected": "Selected.",
 	"components.calendar.show": "Show {month}",

package/lang/es-es.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Cerrar alerta",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "No seleccionado.",
 	"components.calendar.selected": "Seleccionado.",
 	"components.calendar.show": "Mostrar {month}",

package/lang/es.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Cerrar alerta",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "No seleccionado.",
 	"components.calendar.selected": "Seleccionado.",
 	"components.calendar.show": "Mostrar {month}",

package/lang/fr-fr.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Fermer l'alerte",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "Non sélectionné.",
 	"components.calendar.selected": "Sélectionné.",
 	"components.calendar.show": "Afficher {month}",

package/lang/fr.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Fermer l'alerte",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "Non sélectionné(e)",
 	"components.calendar.selected": "Sélectionné(e).",
 	"components.calendar.show": "Afficher {month}",

package/lang/hi.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "अलर्ट बंद करें",
 	"components.breadcrumbs.breadcrumb": "ब्रेडक्रंब",
 	"components.button-add.addItem": "आइटम जोड़ें",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "चयनित नहीं।",
 	"components.calendar.selected": "चयनित।",
 	"components.calendar.show": "{month} दिखाएँ",

package/lang/ja.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "アラートを閉じる",
 	"components.breadcrumbs.breadcrumb": "階層",
 	"components.button-add.addItem": "項目の追加",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "選択されていません。",
 	"components.calendar.selected": "選択されています。",
 	"components.calendar.show": "{month} を表示",

package/lang/ko.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "경보 닫기",
 	"components.breadcrumbs.breadcrumb": "이동 경로",
 	"components.button-add.addItem": "항목 추가",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "선택되지 않음.",
 	"components.calendar.selected": "선택됨.",
 	"components.calendar.show": "{month} 표시",

package/lang/nl.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Waarschuwing sluiten",
 	"components.breadcrumbs.breadcrumb": "Kruimelpad",
 	"components.button-add.addItem": "Item toevoegen",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "Niet geselecteerd.",
 	"components.calendar.selected": "Geselecteerd.",
 	"components.calendar.show": "{month} weergeven",

package/lang/pt.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Fechar alerta",
 	"components.breadcrumbs.breadcrumb": "Auxiliar de navegação",
 	"components.button-add.addItem": "Adicionar item",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "Não selecionado.",
 	"components.calendar.selected": "Selecionado.",
 	"components.calendar.show": "Mostrar {month}",

package/lang/sv.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Stängningsvarning",
 	"components.breadcrumbs.breadcrumb": "Sökväg",
 	"components.button-add.addItem": "Lägg till objekt",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "Inte vald.",
 	"components.calendar.selected": "Markerad.",
 	"components.calendar.show": "Visa {month}",

package/lang/tr.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "Kapatma Uyarısı",
 	"components.breadcrumbs.breadcrumb": "İçerik Haritası",
 	"components.button-add.addItem": "Öğe Ekle",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "Seçili Değil.",
 	"components.calendar.selected": "Seçili.",
 	"components.calendar.show": "{month} Göster",

package/lang/zh-cn.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "关闭提醒",
 	"components.breadcrumbs.breadcrumb": "痕迹导航",
 	"components.button-add.addItem": "添加项目",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "未选择。",
 	"components.calendar.selected": "已选择。",
 	"components.calendar.show": "显示 {month}",

package/lang/zh-tw.js

@@ -2,6 +2,7 @@ export default {
 	"components.alert.close": "關閉警示",
 	"components.breadcrumbs.breadcrumb": "導覽路徑",
 	"components.button-add.addItem": "新增項目",
+	"components.calendar.hasEvents": "Has Events.",
 	"components.calendar.notSelected": "未選取。",
 	"components.calendar.selected": "已選取。",
 	"components.calendar.show": "顯示{month}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.44.2",
+  "version": "3.45.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",