{"id":13583528,"url":"https://github.com/jojoee/add2calendar","last_synced_at":"2025-08-22T00:32:28.148Z","repository":{"id":52725401,"uuid":"64134532","full_name":"jojoee/add2calendar","owner":"jojoee","description":":calendar: Allow you to add event to calendar easier","archived":false,"fork":false,"pushed_at":"2022-04-16T11:52:36.000Z","size":267,"stargazers_count":60,"open_issues_count":3,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-01T14:24:17.261Z","etag":null,"topics":["calendar","event","ical","outlook"],"latest_commit_sha":null,"homepage":"https://jojoee.github.io/add2calendar/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jojoee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-25T12:59:28.000Z","updated_at":"2024-02-12T00:18:48.000Z","dependencies_parsed_at":"2022-08-24T13:21:31.375Z","dependency_job_id":null,"html_url":"https://github.com/jojoee/add2calendar","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jojoee%2Fadd2calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jojoee%2Fadd2calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jojoee%2Fadd2calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jojoee%2Fadd2calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jojoee","download_url":"https://codeload.github.com/jojoee/add2calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230542289,"owners_count":18242332,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","event","ical","outlook"],"created_at":"2024-08-01T15:03:33.337Z","updated_at":"2024-12-20T06:07:17.199Z","avatar_url":"https://github.com/jojoee.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Add2Calendar\n\n![release](https://github.com/jojoee/add2calendar/workflows/release/badge.svg)\n![continuous integration](https://github.com/jojoee/add2calendar/workflows/continuous%20integration/badge.svg?branch=master)\n[![Codecov](https://img.shields.io/codecov/c/github/jojoee/add2calendar.svg)](https://codecov.io/github/jojoee/add2calendar)\n[![Bower Version](https://img.shields.io/bower/v/add2calendar.svg)](https://bower.io/search/?q=add2calendar)\n[![Npm Version](https://img.shields.io/npm/v/add2calendar.svg)](https://www.npmjs.com/package/add2calendar)\n[![License - npm](https://img.shields.io/npm/l/add2calendar.svg)](http://opensource.org/licenses/MIT)\n[![Release Version](https://img.shields.io/github/release/jojoee/add2calendar.svg)](https://github.com/jojoee/add2calendar/releases)\n[![Downloads](https://img.shields.io/npm/dt/add2calendar.svg)](https://github.com/jojoee/add2calendar/archive/master.zip)\n\nAllow you to add event to `calendar` easier\n\n[![Screenshot 1](https://raw.githubusercontent.com/jojoee/add2calendar/master/screenshot/screenshot1.gif \"Screenshot 1\")](http://jojoee.github.io/add2calendar/)\n\n## Feature\n| | Single Event | Multi Event |\n| --- | --- | --- |\n| Google | ✅ | |\n| Yahoo | ✅ | |\n| iCal | ✅ | ✅ |\n| Outlook | ✅ | ✅ |\n\n## Compatible with all browsers:\n- Google Chrome 19+\n- Mozilla Firefox 3.5+\n- Safari 6+\n- Internet Explorer 10+\n- Opera 11.5\n\n## Getting Started\n\n```\nInstall\n\n1. Install via `npm`\n1.1 Install npm\n1.2 Install package: `npm install --save add2calendar`\n\n2. Install via `bower`\n2.1 Install npm\n2.2 Install bower: `npm install -g bower`\n2.3 Install package: `bower install --save add2calendar`\n```\n\n```javascript\n// Import via CommonJS\nconst Add2Calendar = require('add2calendar')\n// Import via ES6\nimport * as Add2Calendar from \"add2calendar\"\n```\n\n```html\n\u003c!-- Import via githack --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://rawcdn.githack.com/jojoee/add2calendar/v1.1.2/css/add2calendar.css\"\u003e\n\u003cscript src=\"https://rawcdn.githack.com/jojoee/add2calendar/v1.1.2/js/add2calendar.js\"\u003e\u003c/script\u003e\n\u003c!-- Import via bower --\u003e\n\u003clink rel=\"stylesheet\" href=\"./bower_components/add2calendar/css/add2calendar.css\"\u003e\n\u003cscript src=\"./bower_components/add2calendar/js/add2calendar.js\"\u003e\u003c/script\u003e\n```\n\n```javascript\n// Example usage\n\nvar singleEventArgs = {\n  title       : 'Add2Calendar plugin event',\n  start       : 'July 27, 2016 10:30',\n  end         : 'July 29, 2016 19:20',\n  location    : 'Bangkok, Thailand',\n  description : 'Event description',\n  isAllDay    : false,\n};\nvar singleEvent = new Add2Calendar(singleEventArgs);\n\n// to get actual url\nsingleEvent.getGoogleUrl(); // https://www.google.com/calendar/render?action=TEMPLATE\u0026text=...\nsingleEvent.getICalUrl(); // data:text/calendar;charset=utf8,BEGIN:VCALENDAR%0A...\nsingleEvent.getOutlookUrl(); // data:text/calendar;charset=utf8,BEGIN:VCALENDAR%0A...\nsingleEvent.getYahooUrl(); // https://calendar.yahoo.com/?v=60\u0026view=d\u0026type=20\u0026title=...\n\n// render a widget\nsingleEvent.createWidget('#single-normal');\n```\n\n```javascript\n// Example usage (React.js)\n\nimport * as Add2Calendar from \"add2calendar\"\nimport React from 'react'\nimport 'add2calendar/css/add2calendar.css'\n\nclass Add2CalendarComponent extends React.Component {\n  componentDidMount () {\n    const singleEvent = new Add2Calendar({\n      title: 'Add2Calendar plugin event',\n      start: 'December 19, 2020 10:30',\n      end: 'December 19, 2020 10:50',\n      location: 'Bangkok, Thailand',\n      description: 'Event description'\n    })\n    singleEvent.createWidget('#single-normal')\n  }\n\n  render() {\n    return (\n      \u003cdiv id=\"single-normal\"\u003e\u003c/div\u003e\n    );\n  }\n}\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cAdd2CalendarComponent /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n```javascript\n// Example usage (multiple events)\n\nvar multiEventsArgs = [\n  {\n    title       : 'Add2Calendar plugin event 1',\n    start       : 'July 27, 2016 10:30',\n    end         : 'July 27, 2016 19:30',\n    location    : 'Bangkok, Thailand',\n    description : 'Event description 1',\n  },\n  {\n    title       : 'Add2Calendar plugin event 2',\n    start       : 'July 28, 2016 10:30',\n    end         : 'July 29, 2016 19:20',\n    location    : 'Bangkok, Thailand',\n    description : 'Event description 2',\n  }\n];\nvar multiEvents = new Add2Calendar(multiEventsArgs);\n\n// to get actual url\nmultiEvents.getICalUrl(); // data:text/calendar;charset=utf8,BEGIN:VCALENDAR%0AVERSION:2...\nmultiEvents.getOutlookUrl(); // data:text/calendar;charset=utf8,BEGIN:VCALENDAR%0AVERSION:2...\n\n// render a widget\nmultiEvents.createWidget('#multi-normal');\n```\n\n```\nParameters\n\n---- Example\ntitle       : 'Add2Calendar plugin event',\nstart       : 'July 27, 2016 10:30',\nend         : 'July 29, 2016 19:20',\nlocation    : 'Bangkok, Thailand',\ndescription : 'Event description.',\nisAllDay    : false,\n\n---- Default\ntitle       : ''\nlocation    : ''\ndescription : ''\nisAllDay    : false\n\n---- Type\ntitle       : \u003cstring\u003e\nlocation    : \u003cstring\u003e\nstart       : \u003cstring\u003e (date format) (required)\nend         : \u003cstring\u003e (date format) (required)\ndescription : \u003cstring\u003e\nisAllDay    : \u003cboolean\u003e\n```\n\n## Why this plugin\nApologize me, if I miss something\n\n1: Simple\n\n2: Many plugins do not meet my requirements\n```\n2.1 [addevent.com](https://www.addevent.com/)\n- Not free\n\n2.2 [addtocalendar](http://addtocalendar.com/)\n- Google: OK\n- iCal: OK\n- Outlook: OK\n- Outlook Online: not working (tested at 25/07/2016)\n- Yahoo!: incorrect end date (tested at 25/07/2016)\n- They link to their own service\n- They add their own \"description\" at the bottom of event's description\n\n2.3 [add-to-calendar-buttons](https://github.com/carlsednaoui/add-to-calendar-buttons)\n- Google: OK\n- iCal: OK\n- Outlook: OK\n- Outlook Online: don't have\n- Yahoo!: incorrect date (tested at 25/07/2016)\n\n2.4 [jquery.addtocalendar](https://github.com/tardate/jquery.addtocalendar)\n- Google: OK\n- iCal: don't have\n- Outlook: don't have\n- Outlook Online: incorrect date, event and description not working (tested at 25/07/2016)\n- Yahoo!: OK\n```\n\n## Important changelog\n```\n1.1.8\n- Fix Yahoo, \"isAllDay\" is not working\n\n1.1.7\n- Test against multiple nodejs versions since 4 to 16\n\n1.1.6\n- Update accessibility by using \u003cbutton\u003e tag instead\n\n1.1.5\n- Support component-based framework e.g. React.js\n\n1.1.4\n- Support \"isAllDay\" param\n\n1.1.3\n- Fix iCal, data is truncated when it contains a \"#\" character\n\n1.1.2\n- Fix CommonJS importing error\n\n1.1.1\n- Update devDependencies versions\n- Adding prefix to prevent naming collision\n- Support CommonJS importing\n- CI integration\n- Support timezone\n- Replace Sass with Less\n\n1.1.0\n- Remove `setLang` API (using `setOption` instead)\n- Remove outlook-online from the list\n\n1.0.0\n- First release\n```\n\n## Future Update\n- Support All Node.js versions since 4 to 16\n- Zero dependency\n- Support ES6 module importing\n- [ ] Update Google format to [new format](https://developers.google.com/google-apps/calendar/gadgets/event/)\n- [ ] `start` and `end` parameters can be `Date` objet\n- [ ] Unit test: automated test on browser environment\n- [ ] Create default value of `end` variable (should be equal `start` + 1 day)\n- [x] Support callback function\n- [x] Set language\n- [x] Support `download` attr\n- [x] Refactor `option` parameter\n- [ ] Support Office 365\n- [ ] Support https://outlook.live.com/\n- [ ] Recurring events e.g. weekly, monthly\n\n## Development and contribution\n\n```bash\nnvm install 4.0.0\nnvm install 4.0.0 \u0026\u0026 nvm use 4.0.0\n# or \"nvm install 11.15.0 \u0026\u0026 nvm use 11.15.0\"\nnpm install\nnpm shrinkwrap\nmv ./npm-shrinkwrap.json ./package-lock.json\n\n# publishing\nnpm publish --dry-run\nnpm publish\n```\n\n## Format and others\n- [escape() vs encodeURI()](http://stackoverflow.com/questions/75980/when-are-you-supposed-to-use-escape-instead-of-encodeuri-encodeuricomponent)\n- [.ics vs .vcs](http://stackoverflow.com/questions/1310420/difference-between-icalendar-ics-and-the-vcalendar-vcs)\n- [Timezone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)\n- Google Format: [1](https://productforums.google.com/forum/#!topic/calendar/HwpEpEjp1Hc), [2](https://productforums.google.com/forum/#!topic/calendar/Ovj6BNTQNL0), [3](http://useroffline.blogspot.com/2009/06/making-google-calendar-link.html)\n- iCal Format: [ICalendar](https://en.wikipedia.org/wiki/ICalendar), [1.0 format(vcs)](http://support.microsoft.com/kb/287625), [2.0 format(ics)](http://support.microsoft.com/kb/307313)\n- [URL Encoding](http://www.w3schools.com/tags/ref_urlencode.asp)\n- [Date.prototype.toISOString()](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)\n- [Outlook: Linking to calendars](https://msdn.microsoft.com/en-us/library/hh846807.aspx)\n- [Adding Events to Users Calendars – Part 2 – Web Calendars](https://richmarr.wordpress.com/2008/01/07/adding-events-to-users-calendars-part-2-web-calendars/)\n\n## Helper tool\n- [htmlviewer](http://codebeautify.org/htmlviewer/)\n- [css-beautify-minify](http://codebeautify.org/css-beautify-minify)\n- [jsbeautifier.org](http://jsbeautifier.org/)\n- [countrycode.org](https://countrycode.org/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjojoee%2Fadd2calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjojoee%2Fadd2calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjojoee%2Fadd2calendar/lists"}