JavaScript : Apple, Google, Microsoft(365, Outlook, Teams), Yahoo 및 일반 iCal 에서 캘린더에 일정 추가 기능 만들기
JavaScript : Apple, Google, Microsoft(365, Outlook, Teams), Yahoo 및 일반 iCal 에서 캘린더에 일정 추가 기능 만들기
https://github.com/add2cal/add-to-calendar-button
HTML 코드 내에서 직접 구성할 수 있는 1개 이상의 버튼을 간단하고 편리하게 통합합니다.
지원되는 캘린더
- 구글 캘린더.
- 야후 캘린더.
- Microsoft 365, Outlook 및 Teams .
- 자동으로 생성된 iCal/ics 파일( Apple 와 같은 다른 모든 캘린더용 ).
Event Types
- 시간 및 하루 종일 이벤트.
- 일회성, 반복적 또는 유동적입니다.
- 가장 강력한 표준 시간대 및 일광 절약 시간 관리(자체 TimeZones iCal 라이브러리 사용 ).
- 동적 날짜(예: "오늘 + 3").
화면UI (look)
- 아름답고 조정 가능한 UI.
- 밝고 어두운 모드.
- 여러 테마.
접근성(Accessibility)
- 최적화되고 조정 가능한 UX(데스크톱 및 모바일용).
- 동적 드롭다운 위치 지정.
- 일부 시나리오가 특정 설정(예: WebView 차단 다운로드)을 지원하지 않는 모든 극단적인 경우를 처리합니다. 아름다운 사용자 안내 해결 방법을 활용합니다.
- 더 나은 SEO를 위해 자동 생성된 Schema.org 풍부한(구조화된) 데이터.
- 마우스, 터치 또는 키보드 입력을 완벽하게 지원합니다(W3C WAI 호환).
- 20개 이상의 언어 지원 아랍어용 RTL 텍스트 사용자 정의 레이블 및 텍스트 블록도 있습니다.
그리고 훨씬 더 기능이...
- 프로세스를 쉽게 이해하고 그 위에 빌드할 수 있는 잘 문서화된 코드.
- 외부 모듈 또는 백엔드 종속성이 없습니다.
- 따라서 일부 데이터 처리 계약에 서명할 필요 없이 GDPR, CCPA 및 LGPD를 완전히 준수합니다.
- 무료 및 오픈 소스.
사용법
CSS(대체 스타일로 atcb-3d 사용)를 <header> 다음 위치에 넣습니다
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/add-to-calendar-button@1/assets/css/atcb.min.css">
<body> 아래에 자바 스크립트 추가
<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@1" async defer></script>
최소 구조(필수)
endDate가 설정되지 않은 경우 스크립트는 startDate와 동일한 것으로 가정합니다.
자동 생성 리치 스니펫의 경우 위치도 필수입니다. 시간대도 필수는 아니지만 권장됩니다. 지정하지 않으면 스크립트는 UTC 를 가정합니다.
<div class="atcb" style="display:none;">
{
"name":"Add the title of your event",
"startDate":"2022-02-21",
"options":[
"Google"
]
}
</div>
전체 구조
(더 많은 숨겨진 옵션은 아래에서 자세히 설명합니다.)
<div class="atcb" style="display:none;">
{
"name":"Add the title of your event",
"description":"A nice description does not hurt",
"startDate":"2022-02-21",
"endDate":"2022-03-24",
"startTime":"10:13",
"endTime":"17:57",
"location":"Somewhere over the rainbow",
"label":"Add to Calendar",
"options":[
"Apple",
"Google",
"iCal",
"Microsoft365",
"MicrosoftTeams",
"Outlook.com",
"Yahoo"
],
"timeZone":"Europe/Berlin",
"trigger":"click",
"inline":true,
"listStyle":"modal",
"iCalFileName":"Reminder-Event"
}
</div>
소스 위치
https://github.com/add2cal/add-to-calendar-button
GitHub - add2cal/add-to-calendar-button: The convenient JavaScript snippet, which lets you reliably create beautiful buttons, wh
The convenient JavaScript snippet, which lets you reliably create beautiful buttons, where people can add events to their calendars. - GitHub - add2cal/add-to-calendar-button: The convenient JavaSc...
github.com