{"id":18383569,"url":"https://github.com/pfelements/pf-calendar","last_synced_at":"2025-04-06T23:32:26.942Z","repository":{"id":57741444,"uuid":"87955781","full_name":"PFElements/pf-calendar","owner":"PFElements","description":"Polymer 2.0 based custom element. A high level wrapper custom element to give you broader control for Managing Calendar of events, appointments or meetings. It uses multiple pf custom elements (pf-calendar-events and pf-calendar-events-data)","archived":false,"fork":false,"pushed_at":"2017-09-11T20:08:46.000Z","size":4022,"stargazers_count":9,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-22T09:24:41.655Z","etag":null,"topics":["calendar","customelements","firebase","polymer","polymer-components","polymer-element","polymer2","web","webcomponents"],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/PFElements.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-04-11T16:22:41.000Z","updated_at":"2020-02-12T12:40:32.000Z","dependencies_parsed_at":"2022-09-09T12:02:02.186Z","dependency_job_id":null,"html_url":"https://github.com/PFElements/pf-calendar","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PFElements%2Fpf-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PFElements%2Fpf-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PFElements%2Fpf-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PFElements%2Fpf-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PFElements","download_url":"https://codeload.github.com/PFElements/pf-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247569128,"owners_count":20959758,"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","customelements","firebase","polymer","polymer-components","polymer-element","polymer2","web","webcomponents"],"created_at":"2024-11-06T01:11:52.420Z","updated_at":"2025-04-06T23:32:26.622Z","avatar_url":"https://github.com/PFElements.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pf-elements\nA Polymer 2.0 based collection of reusable web components \n\n[![Join the chat at https://gitter.im/pf-elements/Lobby](https://badges.gitter.im/pf-elements/Lobby.svg)](https://gitter.im/pf-elements/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/owner/my-element)\n\n## Demo\n[Click here for docs \u0026 demo](https://www.webcomponents.org/element/PFElements/pf-calendar/demo/demo/index.html)\n\n| Element Name | Latest Version (Bower) | Npm version  | Build Status |\n|--------------|------------------------|--------------|--------------|\n| [pf-calendar](https://github.com/PFElements/pf-calendar) | [![GitHub version](https://badge.fury.io/gh/PFElements%2Fpf-calendar.svg)](https://badge.fury.io/gh/PFElements%2Fpf-calendar) | [![npm version](https://badge.fury.io/js/pf-calendar.svg)](https://www.npmjs.com/package/pf-calendar) |[![Build Status](https://travis-ci.org/PFElements/pf-calendar.svg?branch=master)](https://travis-ci.org/PFElements/pf-calendar) | | [pf-calendar-event]|\n\n## Install the Polymer-CLI\n\nFirst, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your application locally.\n\n---\n# A composite component\n`\u003cpf-calendar\u003e\u003c/pf-calendar\u003e` makes use of two other components together to give you control over customizing the UI of the calendar and also to be able to customize the backend data for the calendar. To supply the data for the calendar this element makes use of Firebase as a backend. \n\nFor referrence please see both of our other custom elements\n`\u003cpf-calendar-events\u003e\u003c/pf-calendar-events\u003e` for the UI and `\u003cpf-calendar-events-data\u003e\u003c/pf-calendar-events-data\u003e` for manipulating the backend data in Firebase.\n\n# Customization and usage\n\nThis custom element can be customized in a number of ways\n\n## Customization of look and feel\n\nBy default you have two general options\n\na. material-calendar\n\nb. classic-calendar\n\nOnce you decide you general look and feel then you can further customize the details, e.g. if you chose a Material Design look and feel and you want to change the width, hight, color etc. you can do that with the provided API. \n#### material Calendar Example\n\u003c!---\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"import\" href=\"pf-calendar-events.html\"\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\n\n\n\n \u003cpf-calendar-events\n                  calendarstyle=\"material-calendar\"\n                  data='[\n                          { \"eventName\": \"Lunch Meeting w/ Mark\", \"calendar\": \"Work\", \"color\": \"orange\",\"date\":\"1491322091394\" },\n                          { \"eventName\": \"Giants vs Packers\", \"calendar\": \"sport\", \"color\": \"blue\",\"date\":\"1499185140000\" },\n                          { \"eventName\": \"Soccer\", \"calendar\": \"sport\", \"color\": \"blue\",\"date\":\"1491581940000\" },\n                          { \"eventName\": \"Public Holiday\", \"calendar\": \"holiday\", \"color\": \"green\",\"date\":\"1494173940000\" }]'\n          \u003e\n\n          \u003c/pf-calendar-events\u003e\n```\n#### Classic Calendar Example\n\u003c!---\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"import\" href=\"pf-calendar-events.html\"\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n \u003cpf-calendar-events\n                  calendarstyle=\"classic-calendar\"\n                  data='[\n                          { \"eventName\": \"Lunch Meeting w/ Mark\", \"calendar\": \"Work\", \"color\": \"orange\",\"date\":\"1491322091394\" },\n                          { \"eventName\": \"Giants vs Packers\", \"calendar\": \"sport\", \"color\": \"blue\",\"date\":\"1499185140000\" },\n                          { \"eventName\": \"Soccer\", \"calendar\": \"sport\", \"color\": \"blue\",\"date\":\"1491581940000\" },\n                          { \"eventName\": \"Public Holiday\", \"calendar\": \"holiday\", \"color\": \"green\",\"date\":\"1494173940000\" }]'\n          \u003e\n\n          \u003c/pf-calendar-events\u003e\n```\ndefault value of 'calendarstyle' is 'material-calendar'\n### Types of calendar\nYou can define different types of calendar events (appointments, meetings, reminders, etc). e.g. you can define a \"Sports\" Calendar \"Office Meeting\" calendar, \"Birthday Reminders\" calendar. Distinct type of categories will appear in different colors.\n\n### CRUD operations\n\nButtons / icons are provided to enable Adding, deleting or updating an event (meeting, reminder, appointment etc)\nMaterial based button and icons are provided to enable these operations.\nFor firebase events data, please see our firebase element\n\n## Customization of Calendar Events/Data (your meetings, appointments, reminders etc)\n\nOf course if you cannot provide you own data then why even use a third party component, and you need events as well to notify you of the user interaction with the calendar\n\nThis custom element provides you two generic ways that again can be further customized\n\na. Data Through firebase custom element (Please see our firebase custom element that can be combined with this element to enable your data interaction from firebase\n\nb. By providing an array of data. (Calendar events, appointments, meetings, reminders etc.)\n\n### CRUD operations\nOur custom element provides a way to hook your CRUD operations into our calendar, it provides a number of API hooks/events to notify you about an operation that is performed on a certain event.\n\n\nCustom Event                     | Description                       \n---------------------------------|----------------------------------------\n`event-add`                      | Add event retuns current selected date ('e.detail.date'), fired when user press add event button  \n`event-edit`                     | Edit event retuns event ('e.detail.event'),fired when user press edit event button\n`event-delete`                   | Delete event retuns event ('e.detail.event'),fired when user press delete event button\n`event-select`                   | Event Select retuns event ('e.detail.event'),fired when user click on any event            \n`date-select`                    | Date Select retuns seleted date and events of date ('e.detail.date'and'e.detail.events'),fired when user click on any event             \n  \n\n### Methods\nThe following methods are available for crude events operation:\n\nMethods                                 | Description                           \n----------------------------------------|--------------------------\n`addNewEvent(event)`                       |  Take event object and add as a into firebase \n`updateEvent(key,event)`                |  Take firebase data ref key and updated event object , update the given ref key node                          \n`deleteEvent(key)`                      |  Take record ref key and delete that event                    \n            \n\n\u003c!---\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"import\" href=\"pf-calendar-events.html\"\u003e\n    \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n\n\n\n\n \u003cpf-calendar-events\n                  data='[\n                          { \"eventName\": \"Lunch Meeting w/ Mark\", \"calendar\": \"Work\", \"color\": \"orange\",\"date\":\"1491322091394\" },\n                          { \"eventName\": \"Giants vs Packers\", \"calendar\": \"sport\", \"color\": \"blue\",\"date\":\"1499185140000\" },\n                          { \"eventName\": \"Soccer\", \"calendar\": \"sport\", \"color\": \"blue\",\"date\":\"1491581940000\" },\n                          { \"eventName\": \"Public Holiday\", \"calendar\": \"holiday\", \"color\": \"green\",\"date\":\"1494173940000\" }]'\n          \u003e\n\n          \u003c/pf-calendar-events\u003e\n```\n\n### Styling\nThe following custom properties and mixins are available for styling:\n\nCustom property                         | Description                             | Default\n----------------------------------------|-----------------------------------------|-------------------------\n`--pf-calendar-bg-color`                |  Calendar background                    | #4A4A4A\n`--pf-calendar-width`                   |  Calendar Width                         | 420px\n`--pf-calendar-height`                  |  Calendar Height                        | 570px\n`--pf-calendar-header-background`       |  Calendar Header Background             | rgba(66, 66, 66, 1)\n`--pf-calendar-header-height`           |  Calendar Header height                 | 50px\n`--pf-calendar-month-title-font-size`   |   Font size of  month on header         | 20px\n`--pf-calendar-month-title-line-height` |  Calendar Header title line Height      | rgba(66, 66, 66, 1)\n`--pf-calendar-header-left-arrow-color` |  Previous Month arrow color             | rgba(160, 159, 160, 1)\n`--pf-calendar-header-right-arrow-color`|  Next Month arrow color                 | rgba(160, 159, 160, 1)\n`--pf-calendar-month-title-color`       |  Month Title color                      | #000\n`--pf-calendar-week-bg`                 |  Background color of week               | #4A4A4A\n`--pf-calendar-day-bg`                  |  Day Background                         | #4A4A4A\n`--pf-calendar-day-color`               |  color of date                          | #000\n`--pf-calendar-other-day-color`         |  color of previous and next month date  | rgba(255, 255, 255, .3)\n`--pf-calendar-today-color`             |  Current date Color                     | rgba(156` 202, 235, 1)\n`--pf-calendar-selected-date-bg`        |  Selected Date Background color         | #000\n`--pf-calendar-selected-date-color`     |  Selected Date color                    | #fff\n`--pf-calendar-day-name-color`          |  Name of Day color e.g(MON,TUE,WED)     | rgba(255` 255, 255, .5)\n`--pf-calendar-event-detail-bg`         |  Event box background                   | rgba(164, 164, 164, 1)\n`--pf-calendar-event-color`              |  color of label \"Event\"                | #000\n`--pf-calendar-addevent-button-bg-color'|  Add Event Button color                 | rgba(164, 164, 164, 1)\n`--pf-calendar-addevent-button-text-color`| Add Event text color                  | #fff\n`--pf-calendar-addevent-button-hover-color`|  Add event button hover color        | rgba(170, 170, 170, 1)\n`--pf-calendar-addbutton-disply`        |  to hide button set \"none\"              |inline-block\n`--pf-calendar-deletebutton-disply`     |  to hide button set \"none\"              |inline\n`--pf-calendar-editbutton-disply`       |  to hide button set \"none\"              |inline\n`--pf-calendar-legend-bg`               |  Background color of legend bar         | rgba(60, 60, 60, 1)\n\n\n\n## Install the Polymer-CLI\n\nFirst, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your application locally.\n\n## Viewing Your Application\n\n```\n$ polymer serve\n```\n\n## Building Your Application\n\n```\n$ polymer build\n```\n\nThis will create a `build/` folder with `bundled/` and `unbundled/` sub-folders\ncontaining a bundled (Vulcanized) and unbundled builds, both run through HTML,\nCSS, and JS optimizers.\n\nYou can serve the built versions by giving `polymer serve` a folder to serve\nfrom:\n\n```\n$ polymer serve build/bundled\n```\n\n## Running Tests\n\n```\n$ polymer test\n```\n\nYour application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.\n\n## Learn more\n\nSee the list of elements, demos, and documentation by browsing this collection on webcomponents.org:\n\n### [Go to webcomponents.org](https://www.webcomponents.org/collection/pfelements/pf-elements)\n\n---\n\n## Contributing\n\nComments, questions, suggestions, issues, and pull requests are all welcome.\n\n### Get in touch with the team\n\nJoing us at [![Join the chat at https://gitter.im/pf-elements/Lobby](https://badges.gitter.im/pf-elements/Lobby.svg)](https://gitter.im/pf-elements/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n- [Twitter](\u003ca href=\"https://twitter.com/polymerio\" class=\"twitter-follow-button\" data-show-count=\"false\"\u003eFollow @polymerio\u003c/a\u003e)\n- [Facebook] (https://www.facebook.com/polymerjs)\n- [Google+] (https://plus.google.com/116168214823506639166) \n- [YouTube] (https://www.youtube.com/channel/UCDKqvDyAn_QTBvCPvrZKTkw) \n\n### Some ways to help:\n\n- **Test the elements and provide feedback**: We would love to hear your feedback on anything related to the elements, like features, API and design. The best way to start is by trying them out. And to get a quick response, either drop a question/comment on the chat or open an issue in GitHub.\n- **Report bugs**: File issues for the elements in their respective GitHub projects.\n- **Send pull requests**: If you want to contribute code, check out the development instructions below.\n\nWe encourage you to read the [contribution instructions by GitHub](https://guides.github.com/activities/contributing-to-open-source/#contributing) also.\n\n## License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpfelements%2Fpf-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpfelements%2Fpf-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpfelements%2Fpf-calendar/lists"}