mmo-calendar

1 symbol · generated 30 Sep 2026

element

mmo-calendar

Event object: - id: string - title: string - description: string - icon: ?string - color: string - start: Date|string - end: Date|string|null - type: 'hint'|'event' (default event) - if 'hint', used to decorate the calendar. Only color is used for now

<mmo-calendar datetime="now" zoom="week" url></mmo-calendar>

Extends: CustomAPIElement

Index

	datetime	the date the calendar is centred on: a date, or `now`
	zoom	what one screen shows: `year`, `month`, `week`, `day` or `list`
	url	where to read the events from (`MMO.elements.CustomAPIElement`)
	ViewDefault static readonly accessor
	zoom accessor	What one screen shows: `year`, `month`, `week`, `day` or `list`.
	datetime accessor	Get the datetime of the calendar
	firstDayOfWeek accessor	The day a week starts on, 0 for Sunday.
	firstHourOfDay accessor	The hour the day grid scrolls to when it opens.
	startOfDay accessor	The first hour the day and week grids draw.
	endOfDay accessor	The last hour the day and week grids draw.
	defaultDotColor accessor	The colour of an event that carries none.
	init()
	today()	Bring the calendar back to today, keeping the current zoom.
	step(dir, zoom)	Move one screen forward or back — a week, a month, a year, whatever the zoom is.
	update()	Redraw the grid for the current date, zoom and events.
	loopEvents(start, end) generator
	loopHints(start, end) generator
	getDayColor(date)	The background a day carries, from the `hint` events covering it.
	renderYear()	Draw the year: twelve month grids, each one a clickable month.
	renderMonth()	Draw the month: a week per row, with the events of each day inside its cell.
	setCellPosition(cell, event, gridStart, gridEnd, matrix)	Put one event on the grid: which rows it spans, and which column it takes when it overlaps another.
	setCellDimension(matrix)	Share the width of a column between the events that overlap in it.
	renderEventsWithTime(grid, startDate, endDate)	Place the events of a day or week grid on the hour rows they cover, side by side when they overlap.
	renderWeek()	Draw the week: seven columns of hours, with the current time marked across them.
	renderDay()	Draw one day: a single column of hours.
	renderList()	Draw the month as a list: one row per day that has something in it.
	(default)	anything to show above the grid, next to the toolbar

Attributes3

datetime

mmo-calendar.jhs

the date the calendar is centred on: a date, or now

datetime="now"

zoom

mmo-calendar.jhs

what one screen shows: year, month, week, day or list

zoom="week"

url

mmo-calendar.jhs

where to read the events from (MMO.elements.CustomAPIElement)

url

Properties8

ViewDefault

staticreadonlyaccessormmo-calendar.jhs:45

static get ViewDefault()

zoom

accessormmo-calendar.jhs:73

What one screen shows: year, month, week, day or list.

get zoom() set zoom(value)

Type: string

datetime

accessormmo-calendar.jhs:92

Get the datetime of the calendar

get datetime() set datetime(value)

Type: MMO.core.Date

firstDayOfWeek

accessormmo-calendar.jhs:108

The day a week starts on, 0 for Sunday.

get firstDayOfWeek() set firstDayOfWeek(value)

Type: number

firstHourOfDay

accessormmo-calendar.jhs:122

The hour the day grid scrolls to when it opens.

get firstHourOfDay() set firstHourOfDay(value)

Type: number

startOfDay

accessormmo-calendar.jhs:136

The first hour the day and week grids draw.

get startOfDay() set startOfDay(value)

Type: number

endOfDay

accessormmo-calendar.jhs:150

The last hour the day and week grids draw.

get endOfDay() set endOfDay(value)

Type: number

defaultDotColor

accessormmo-calendar.jhs:164

The colour of an event that carries none.

get defaultDotColor() set defaultDotColor(value)

Type: string

Methods15

init()

mmo-calendar.jhs:56

init()

today()

mmo-calendar.jhs:180

Bring the calendar back to today, keeping the current zoom.

today()

returns void

step(dir, zoom)

mmo-calendar.jhs:190

Move one screen forward or back — a week, a month, a year, whatever the zoom is.

step(dir, zoom = null)

dir	`number`	- `1` forward, `-1` back
zoom = null	`?string`	- step by this zoom instead of the current one
returns	`void`

update()

mmo-calendar.jhs:200

Redraw the grid for the current date, zoom and events.

update()

returns void

loopEvents(start, end)

generatormmo-calendar.jhs:219

*loopEvents(start, end)

start
end

loopHints(start, end)

generatormmo-calendar.jhs:231

*loopHints(start, end)

start
end

getDayColor(date)

mmo-calendar.jhs:248

The background a day carries, from the hint events covering it.

getDayColor(date)

date	`Date`
returns	`?string`

renderYear()

mmo-calendar.jhs:264

Draw the year: twelve month grids, each one a clickable month.

renderYear()

returns void

renderMonth()

mmo-calendar.jhs:337

Draw the month: a week per row, with the events of each day inside its cell.

renderMonth()

returns void

setCellPosition(cell, event, gridStart, gridEnd, matrix)

mmo-calendar.jhs:431

Put one event on the grid: which rows it spans, and which column it takes when it overlaps another.

setCellPosition(cell, event, gridStart, gridEnd, matrix = null)

cell	`HTMLElement`
event	`object`
gridStart	`Date`
gridEnd	`Date`
matrix = null	`?Array`	- the overlap map being built
returns	`void`

setCellDimension(matrix)

mmo-calendar.jhs:537

Share the width of a column between the events that overlap in it.

setCellDimension(matrix)

matrix	`Array`	- the overlap map `setCellPosition` built
returns	`void`

renderEventsWithTime(grid, startDate, endDate)

mmo-calendar.jhs:670

Place the events of a day or week grid on the hour rows they cover, side by side when they overlap.

renderEventsWithTime(grid, startDate, endDate)

grid	`HTMLElement`
startDate	`Date`
endDate	`Date`
returns	`void`

renderWeek()

mmo-calendar.jhs:702

Draw the week: seven columns of hours, with the current time marked across them.

renderWeek()

returns void

renderDay()

mmo-calendar.jhs:769

Draw one day: a single column of hours.

renderDay()

returns void

renderList()

mmo-calendar.jhs:825

Draw the month as a list: one row per day that has something in it.

renderList()

returns void

Slots1

(default)

mmo-calendar.jhs

anything to show above the grid, next to the toolbar

<slot>