Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html
>
<head>
<meta charset="utf-8" />
<title>Calendar Event Create/Edit Dialog Test</title>
<link rel="localization" href="messenger/calendarDialog.ftl" />
<link
rel="stylesheet"
/>
<script
type="module"
src="moz-src:///comm/mail/components/calendar/content/calendar-event-create-edit-dialog.mjs"
></script>
<style>
body {
margin: 0;
}
#calendarDisplayBox {
position: absolute;
inset: 100px auto auto 100px;
width: 800px;
height: 600px;
overflow: auto;
}
#calendarContent {
position: relative;
width: 100%;
height: 1200px;
}
calendar-month-day-box,
calendar-event-box,
[data-calendar-range-target] {
position: absolute;
display: block;
width: 100px;
height: 100px;
}
#calendarCell {
inset: 200px auto auto 100px;
}
#calendarEvent {
inset: 100px auto auto 600px;
}
#calendarRange {
inset: 450px auto auto 600px;
}
[is="calendar-event-create-edit-dialog"] {
position: absolute;
box-sizing: border-box;
width: 200px;
height: auto;
margin: 0;
padding: 0;
border: 0;
}
</style>
</head>
<body>
<template id="calendarEventCreateEditDialogTemplate">
<header class="calendar-event-create-edit-dialog-header">
<div class="calendar-name"></div>
<div class="calendar-actions">
<div class="expand-control"></div>
<div class="more-actions">
<button
id="calendarEventCreateEditDialogMenuButton"
class="button icon-button icon-only button-flat menu-button"
type="button"
aria-haspopup="menu"
aria-expanded="false"
data-l10n-id="calendar-dialog-menu"
hidden="hidden"
></button>
<xul:menupopup
id="calendarEventCreateEditDialogMenu"
class="no-icon-menupopup"
>
<xul:menuitem
id="calendarEventCreateEditDialogDeleteEvent"
data-l10n-id="calendar-dialog-menu-delete"
/>
</xul:menupopup>
</div>
<button
class="button icon-button icon-only button-flat close-button"
data-l10n-id="calendar-dialog-close-button"
type="button"
></button>
</div>
<div class="event-title"></div>
</header>
<main class="calendar-event-create-edit-dialog-body">
<div class="calendar-event-create-edit-dialog-subview-container">
<section
id="calendarEventCreateEditDialogMainSubview"
class="calendar-event-create-edit-dialog-subview"
data-subview="main"
>
<div class="calendar-event-create-edit-dialog-rows"></div>
</section>
</div>
</main>
<footer class="calendar-event-create-edit-dialog-footer"></footer>
</template>
<button id="menuCreate" type="button">New Event</button>
<button id="toolbarCreate" type="button">Create</button>
<div id="calendarDisplayBox">
<div id="calendarContent">
<calendar-month-day-box id="calendarCell">
<span id="calendarCellChild"></span>
</calendar-month-day-box>
<calendar-event-box id="calendarEvent">
<span id="calendarEventChild"></span>
</calendar-event-box>
<div id="calendarRange" data-calendar-range-target="true">
<span id="calendarRangeChild"></span>
</div>
</div>
</div>
<dialog is="calendar-event-create-edit-dialog"></dialog>
</body>
</html>