Príklady¶
Pripravili sme pre vás množstvo rôznych štýlov, aby ste si ich mohli upraviť podľa svojich potrieb. Pre každý štýl si môžete kalendár upraviť a tvarovať podľa svojich potrieb. Ak vás to inšpiruje, môžete tiež jednoducho start from scratch.
Ste hrdí na svoj kalendár? Podeľte sa oň v [sekcii Prezentácia]!
Viac kalendárov¶
Môžete vložiť niekoľko kalendárov do jedného pohľadu. V tomto príklade ukážeme rôzne izby v kancelárii.
{
"css": ".CALENDAR-INDEX-0, .CALENDAR-INDEX-0 .dhx_body, .CALENDAR-INDEX-0 .dhx_title { background-color: #77767b; } .CALENDAR-INDEX-1, .CALENDAR-INDEX-1 .dhx_body, .CALENDAR-INDEX-1 .dhx_title { background-color: #f9f06b; } .CALENDAR-INDEX-2, .CALENDAR-INDEX-2 .dhx_body, .CALENDAR-INDEX-2 .dhx_title { background-color: #dc8add; }",
"date": "2024-07-05",
"ending_hour": "18",
"hour_format": "%g:%i %a",
"prefer_browser_language": true,
"skin": "dhtmlxscheduler_flat.css",
"start_of_week": "su",
"starting_hour": "8",
"tab": "week",
"timezone": "Europe/London",
"title": "Office Rooms",
"url": [
"https://open-web-calendar.quelltext.eu/assets/calendars/rooms/call-cell.ics",
"https://open-web-calendar.quelltext.eu/assets/calendars/rooms/kitchen.ics",
"https://open-web-calendar.quelltext.eu/assets/calendars/rooms/meeting-room.ics"
]
}
<iframe class="open-web-calendar" id=""
style="background:url('/assets/img/circular-loader.gif') center center no-repeat; border-radius: 10px;"
src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?specification_url=https://open-web-calendar.quelltext.eu/assets/templates/rooms.json&"
sandbox="allow-scripts allow-same-origin allow-top-navigation"
allowTransparency="true" scrolling="no"
frameborder="0" height="600px" width="100%"></iframe>
To je tiež užitočné, ak máte viacero zdrojov kalendára - byť rôzne miesta, kluby, aplikácie alebo organizácie.
Úpravy:
- CSS
- hodín
- aktuality
Mobilný jednodňový kalendár¶
Tu je príklad jednodňového pohľadu na vianočný deň:
{
"controls": [
"today"
],
"css": ".dhx_cal_navline { display: none !important; height: 0 !important; }\n.dhx_cal_header { top: 0px !important; }\n.dhx_cal_data { top: 35px !important; }",
"date": "2024-12-24",
"hour_format": "%g:%i %a",
"prefer_browser_language": true,
"skin": "dhtmlxscheduler_flat.css",
"starting_hour": "9",
"tab": "day",
"tabs": [],
"timezone": "Europe/London",
"title": "Christmas Calendar",
"url": "https://open-web-calendar.quelltext.eu/assets/calendars/christmas.ics"
}
<iframe class="open-web-calendar" id=""
style="background:url('/assets/img/circular-loader.gif') center center no-repeat; border-radius: 10px;"
src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?specification_url=https://open-web-calendar.quelltext.eu/assets/templates/christmas-day.json&"
sandbox="allow-scripts allow-same-origin allow-top-navigation"
allowTransparency="true" scrolling="no"
frameborder="0" height="600px" width="300px"></iframe>
Úpravy:
- čas začiatku a konca
- pevný dátum
- CSS
Recurring Events with Categories¶
If you are at home, planning the days with the family, events might have different categories depending on who they are for: work
or personal
. Events can be single events or occur every day.
{
"css": ".CATEGORY-work { background: #E3B024 !important; }\n.CATEGORY-personal { background: #73E324 !important; }\n.dhx_cal_navline, .dhx_scale_bar, .dhx_cal_container, .dhx_cal_header, .dhx_cal_scale_placeholder, .dhx_scale_holder, .dhx_scale_hour {background-color: #f9f06b;}.dhx_scale_holder_now, .dhx_now .dhx_month_head, .dhx_now .dhx_month_body { background-color: #f8e45c;}",
"date": "2024-04-08",
"ending_hour": "22",
"prefer_browser_language": true,
"specification_url": "https://open-web-calendar.quelltext.eu/assets/templates/family-planning.json",
"start_of_week": "work",
"starting_hour": "8",
"tab": "week",
"timezone": "Europe/London",
"title": "Family Planning",
"url": "https://open-web-calendar.quelltext.eu/assets/calendars/categories.ics"
}
<iframe class="open-web-calendar" id=""
style="background:url('/assets/img/circular-loader.gif') center center no-repeat; border-radius: 10px;"
src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?specification_url=https://open-web-calendar.quelltext.eu/assets/templates/family-planning.json&"
sandbox="allow-scripts allow-same-origin allow-top-navigation"
allowTransparency="true" scrolling="no"
frameborder="0" height="600px" width="100%"></iframe>
Úpravy:
- čas začiatku a konca
- pevný dátum
- CSS
Podujatia hostované ako skrytá služba Tor¶
Tento kalendár nie je štylizovaný, ale obsahuje udalosti, ktoré je možné hostiť za firewallom na malom anonymnom serveri. [Príklad][tor-example]
Úpravy:
Vyberte časové pásma¶
V prípade medzinárodného kalendára môžete povoliť výber časového pásma, v ktorom sa udalosti zobrazujú.
{
"controls": [
"today",
"date"
],
"prefer_browser_language": true,
"skin": "dhtmlxscheduler_contrast_white.css",
"tab": "day",
"tabs": [
"week",
"day"
],
"title": "Timezone Example",
"url": "https://open-web-calendar.quelltext.eu/assets/calendars/timezone-example.ics"
}
<iframe class="open-web-calendar" id="owcTimezoneExample"
style="background:url('/assets/img/circular-loader.gif') center center no-repeat; border-radius: 10px;"
src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?specification_url=https://open-web-calendar.quelltext.eu/assets/templates/timezone-example.json&"
sandbox="allow-scripts allow-same-origin allow-top-navigation"
allowTransparency="true" scrolling="no"
frameborder="0" height="600px" width="100%"></iframe>
<!--
This is HTML and JavaScript that allows changing a calendar URL specific to a timezone.
TODO: Choose the time zones that you want the viewer to choose:
-->
<select id="timezoneOption"><option value="America/New_York">New York</option><option value="Europe/London">London</option><option value="Asia/Singapore">Singapore</option><option value="">My Local Time Zone</option></select>
<script>
// TODO: Set the iframe id:
var calendarIFrameID = "owcTimezoneExample";
var originalUrl; // the oririginal URL of the iframe
var calendarIFrame; // the stored iframe as a variable
// Save the original URL
function setInitialTimezone() {
calendarIFrame = document.getElementById(calendarIFrameID);
originalUrl = calendarIFrame.src;
changeTimezone();
}
// Change to the selected timezone
function changeTimezone() {
console.log("change timezone: " + timezoneOption.value);
calendarIFrame.src = originalUrl + (timezoneOption.value ? "timezone=" + timezoneOption.value : "");
console.log("url: " + calendarIFrame.src);
}
window.addEventListener("load", setInitialTimezone);
timezoneOption.onchange = changeTimezone;
</script>
Úpravy:
- JavaScript
- časové pásmo
Voľný a zaneprázdnený¶
Dizajn môžete zmeniť podľa toho, či máte čas alebo nie.
Tento kalendár zmenil CSS tak, že pozadie je zelené a udalosti sú buď oranžové, alebo červené.
{
"css": ".dhx_cal_event_clear.dhx_cal_event_line_start.dhx_cal_event_line_end.TRANSP-OPAQUE, .dhx_cal_event_line.dhx_cal_event_line_start.dhx_cal_event_line_end.TRANSP-OPAQUE { background-color: red; }\n.dhx_cal_event_clear.dhx_cal_event_line_start.dhx_cal_event_line_end.TRANSP-TRANSPARENT, .dhx_cal_event_line.dhx_cal_event_line_start.dhx_cal_event_line_end.TRANSP-TRANSPARENT { background-color: orange; }\n\n.event {\n height: 57px !important;\n transform: translate(0px, 4px);\n}\n.dhx_after .dhx_month_body, .dhx_month_body, .dhx_before .dhx_month_body {\n background-color: lightgreen;\n}\n\n.dhx_month_body:before {\n content: \"Free\";\n display: inline-block;\n transform: translateY(19px);\n}\n\n.dhx_cal_event_clear_date {\n display: none;\n}\n\n.dhx_cal_event_clear::before {\n display: none;\n}",
"prefer_browser_language": true,
"skin": "flat",
"tabs": [],
"url": "https://open-web-calendar.quelltext.eu/assets/calendars/free-busy-events.ics"
}
<iframe class="open-web-calendar" id=""
style="background:url('/assets/img/circular-loader.gif') center center no-repeat; border-radius: 10px;"
src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?specification_url=https://open-web-calendar.quelltext.eu/assets/templates/free-and-busy.json&"
sandbox="allow-scripts allow-same-origin allow-top-navigation"
allowTransparency="true" scrolling="no"
frameborder="0" height="600px" width="100%"></iframe>
Úpravy:
- CSS
Registrácia do CalDAV¶
Open Web Calendar podporuje CalDAV pre okamžitú synchronizáciu udalostí. Môžete ho použiť napríklad s Nextcloud.
V nižšie uvedenom príklade sme na vytvorenie udalosti, na ktorú sa môžete prihlásiť, použili CalDAV. Po registrácii dostanete e-mailovú pozvánku a vaše meno a e-mail sa zobrazia v kalendári.
{
"css": ".STATUS-TENTATIVE {--dhx-scheduler-event-background: #aaa;}",
"show_attendees": true,
"show_organizers": true,
"show_participant_role": true,
"show_participant_status": true,
"skin": "flat",
"style-event-status-confirmed": true,
"style-event-status-tentative": true,
"tabs": [
"month",
"week"
],
"title": "CalDAV sign up template",
"url": "fernet://gAAAAABn1uYHjkiJcey7cas_TRHyXBr0xDEP-R_IsM0jLw0PkMeGHlIgb-rZVHL7_RawixUpafG3JYgeIWpxM3GxvEgSITcXSGwTPZozB61mjwsKNYqdab-gWshwnDJp1iMFDjv8wPyCsWZwB5xpxBaotQ8WZvoZRyi0QUDt8le7G-2sBqvMt59WIL_HFbnIvR3QeZHjyBLWgxj0X0kgiiQ2pHnwIujDraJ2taX2_6VVGu8eXsOCo57XkkGUydR0rqJRVhj4Uow53lu2pfmGhIzOeU9jpqwYWYgWT_Y1ZeuCs6gvXfVBSrVzB3T_3ooZJAQzQIzLxDyV07NHh_d9xzxqoIrET05ApRLc6_cG_zAC-W0SA8Rex1JCyLJOBaD-aohWngeiaNrmMlWHnEdcVje_jNehgy7aDL8yfmR04vfwll_C878rgSU="
}
<iframe class="open-web-calendar" id=""
style="background:url('/assets/img/circular-loader.gif') center center no-repeat; border-radius: 10px;"
src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?specification_url=https://open-web-calendar.quelltext.eu/assets/templates/caldav-signup.json&"
sandbox="allow-scripts allow-same-origin allow-top-navigation"
allowTransparency="true" scrolling="no"
frameborder="0" height="600px" width="100%"></iframe>
Úpravy:
- Aktivujte registráciu CalDAV
- Šifrovanie URL
- Účastníci
Pozri tiež:
Prispejte príkladmi!¶
Ak chcete pridať ďalší príklad alebo prezentovať svoj kalendár, toto je to pravé miesto. Môžete nás kontaktovať s odkazom na kalendár, napr. v [issue]](https://github.com/niccokunzmann/open-web-calendar/issues).
Stránku si môžete upraviť sami:
- Umiestnite všetky požadované súbory
.ics
do adresára [calendars]. - Stiahnite si špecifikáciu kalendára. A pridajte ju do adresára [templates].
- Edit this file and add a section.