எடுத்துக்காட்டுகள்¶

We have prepared a variety of different styles so you can edit them to your needs. For each style, you can edit the calendar and shape it as you need it. If you are inspired, you can also just head over and start from scratch.

உங்கள் காலெண்டரைப் பற்றி நீங்கள் பெருமைப்படுகிறீர்களா? அதை இங்கே பகிரவும்!

பல காலெண்டர்கள்¶

நீங்கள் பல காலெண்டர்களை ஒரே பார்வையில் உட்பொதிக்கலாம். இந்த எடுத்துக்காட்டில், நாங்கள் ஒரு அலுவலகத்தில் வெவ்வேறு அறைகளைக் காட்டுகிறோம்.

நாட்காட்டிவிவரக்குறிப்புHTML

{
  "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>

காலெண்டரைத் திருத்தவும்

உங்களிடம் பல காலண்டர் ஆதாரங்கள் இருந்தால் இதுவும் பயனுள்ளதாக இருக்கும் - இது வெவ்வேறு இடங்கள், கிளப்புகள், பயன்பாடுகள் அல்லது அமைப்புகளாக இருக்கலாம்.

மாற்றங்கள்:

சிஎச்எச்
மணி
தாவல்

மொபைல் ஒரு நாள் காலண்டர் ஊட்டம்¶

கிறிச்துமச் தினத்தின் ஒரு நாள் பார்வைக்கு இங்கே ஒரு எடுத்துக்காட்டு:

நாட்காட்டிவிவரக்குறிப்புHTML

{
  "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>

Edit the calendar

மாற்றங்கள்:

தொடக்க மற்றும் இறுதி நேரம்
நிலையான தேதி
சிஎச்எச்

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.

நாட்காட்டிவிவரக்குறிப்புHTML

{
  "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>

காலெண்டரைத் திருத்தவும்

மாற்றங்கள்:

தொடக்க மற்றும் இறுதி நேரம்
நிலையான தேதி
சிஎச்எச்

டோர் மறைக்கப்பட்ட சேவையாக வழங்கப்பட்ட நிகழ்வுகள்¶

This calendar is not styled but contains events that can be hosted behind a firewall on a little anonymous server. Example

மாற்றங்கள்:

proxy parameters

நேர மண்டலங்களைத் தேர்வுசெய்க¶

ஒரு பன்னாட்டு நாட்காட்டியைப் பொறுத்தவரை, நிகழ்வுகள் காண்பிக்கப்படும் நேர மண்டலத்தைத் தேர்வுசெய்ய நீங்கள் அனுமதிக்கலாம்.

<ஐடியைத் தேர்ந்தெடுக்கவும் = “நேரமாலை <விருப்ப மதிப்பு = “”> எனது உள்ளக நேர மண்டலம்

நாட்காட்டிவிவரக்குறிப்புHTML

{
  "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>

காலெண்டரைத் திருத்தவும்

மாற்றங்கள்:

சாவாகைஉரை
நேர மண்டலம்

இலவச மற்றும் பிசியான¶

நீங்கள் சுதந்திரமாக இருக்கிறீர்களா அல்லது பிசியாக இருக்கிறீர்களா என்பதை அடிப்படையாகக் கொண்டு வடிவமைப்பை மாற்றலாம்.

இந்த காலண்டர் சிஎச்எச் ஐ மாற்றியுள்ளது, இதனால் பின்னணி பச்சை நிறமாகவும், நிகழ்வுகள் ஆரஞ்சு அல்லது சிவப்பு நிறமாகவும் இருக்கும்.

நாட்காட்டிவிவரக்குறிப்புHTML

{
  "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>

காலெண்டரைத் திருத்தவும்

மாற்றங்கள்:

சிஎச்எச்

The Open Web Calendar supports CalDAV for instant event synchronization. You can use it e.g. with Nextcloud.

In the example below, we used CalDAV to create event that you can sign up to. Once you sign up, you receive an email invitation and your name and email show up in the calendar.

நாட்காட்டிவிவரக்குறிப்புHTML

{
    "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>

Edit the calendar

மாற்றங்கள்:

Activate CalDAV Sign Up
URL-Encryption
Participants

மேலும் காண்க: