Examples¶
Abbiamo preparato una varietà di stili diversi in modo che tu possa modificarli in base alle tue esigenze. Per ogni stile, puoi modificare il calendario e la forma come preferisci. Se sei ispirato, puoi anche semplicemente andare e iniziare da zero.
Are you proud of your calendar? Share it here!
Calendari multipli¶
Puoi incorporare diversi calendari in una vista. In questo esempio, mostriamo diverse stanze in un ufficio.
{
"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>
Questa funzionalità è utile anche se si dispone di più origini di calendario, che si tratti di luoghi, club, applicazioni o organizzazioni diverse.
Modifiche:
- CSS
- ore
- scheda
Mobile One Day Calendar Feed¶
Here is an example of a one day view of a Christmas day:
{
"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>
Modifiche:
- start and end time
- fixed date
- 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>
Modifiche:
- start and end time
- fixed date
- CSS
Events Hosted as a Tor Hidden Service¶
This calendar is not styled but contains events that can be hosted behind a firewall on a little anonymous server. Example
Modifiche:
Choose Timezones¶
For an international calendar, you can allow choosing the time zone that the events are displayed in.
{
"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>
Modifiche:
- JavaScript
- timezone
Free and Busy¶
You can change the design based on whether you are free or busy.
This calendar has changed CSS so that the background is green and the events are either orange or red.
{
"css": ".dhx_cal_event_line.dhx_cal_event_line_start.dhx_cal_event_line_end.TRANSP-OPAQUE { background-color: red; }\n.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}",
"prefer_browser_language": true,
"language": "de",
"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>
Modifiche:
- CSS
Contribute Examples!¶
If you want to add another example or showcase your calendar, this is the place. You can contact us with the link of the calendar e.g. in an issue.
You can edit the page yourself: