pf-elements

A Polymer 2.0 based collection of reusable web components

Demo

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your application locally.

PF Calendar Events

An Advanced/composite Polymer 2.0 based custom elements that can be used to set Events/appointments/meetings in a calendar.

Element Name	Latest Version (Bower)	Npm version	Build Status
pf-calendar-events

Learn more

See the list of elements, demos, and documentation by browsing this collection on webcomponents.org:

Take me to webcomponents.org ›

Customization and usage

<pf-calendar-events></pf-calendar-events> can be customized in a number of ways

Customization of look and feel

By default you have two general options

a. material-calendar

b. classic-calendar

Once 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.

Material Calendar Example

 <pf-calendar-events
                  calendarstyle="material-calendar"
data='[
                          { "eventName": "Lunch Meeting W/ Mark", "category": "Work", "color": "orange","date":"1491322091394" },
                          { "eventName": "Rob Birthday  ", "category": "Birthday", "color": "blue","date":"1491322091394" },
                          { "eventName": "Appointment With Dr David", "category": "Medical", "color": "yellow","date":"1491322091394" },
                          { "eventName": "Public Holiday", "category": "holiday", "color": "green","date":"1492196400000" },
                          { "eventName": "Due date of Project Dilivery", "category": "Work", "color": "orange","date":"1492455600000" },
                          { "eventName": "Lunch Meeting W/ Mark", "category": "Work", "color": "orange","date":"1495322091394" },
                          { "eventName": "Rob Birthday  ", "category": "Birthday", "color": "blue","date":"1495322091394" },
                          { "eventName": "Appointment With Dr David", "category": "Medical", "color": "yellow","date":"1495047600000" },
                          { "eventName": "Public Holiday", "category": "holiday", "color": "green","date":"1495196400000" },
                          { "eventName": "Due date of Project Dilivery", "category": "Work", "color": "orange","date":"1495455600000" },
                           { "eventName": "Lunch Meeting W/ Mark", "category": "Work", "color": "orange","date":"1497322091394" },
                          { "eventName": "Rob Birthday  ", "category": "Birthday", "color": "blue","date":"1497322091394" },
                          { "eventName": "Appointment With Dr David", "category": "Medical", "color": "yellow","date":"1497047600000" },
                          { "eventName": "Public Holiday", "category": "holiday", "color": "green","date":"1497196400000" },
                          { "eventName": "Due date of Project Dilivery", "category": "Work", "color": "orange","date":"1497455600000" },
                           { "eventName": "Lunch Meeting W/ Mark", "category": "Work", "color": "orange","date":"1500322091394" },
                          { "eventName": "Rob Birthday  ", "category": "Birthday", "color": "blue","date":"1500322091394" },
                          { "eventName": "Appointment With Dr David", "category": "Medical", "color": "yellow","date":"150047600000" },
                          { "eventName": "Public Holiday", "category": "holiday", "color": "green","date":"150096400000" },
                          { "eventName": "Due date of Project Dilivery", "category": "Work", "color": "orange","date":"15005600000" },
                            { "eventName": "Lunch Meeting W/ Mark", "category": "Work", "color": "orange","date":"1502922091394" },
                          { "eventName": "Rob Birthday  ", "category": "Birthday", "color": "blue","date":"1502922091394" },
                          { "eventName": "Appointment With Dr David", "category": "Medical", "color": "yellow","date":"1502947600000" },
                          { "eventName": "Public Holiday", "category": "holiday", "color": "green","date":"1502996400000" },
                          { "eventName": "Due date of Project Dilivery", "category": "Work", "color": "orange","date":"1502955600000" },
                          { "eventName": "Appoint ment With Dr David", "category": "Medical", "color": "yellow","date":"1499185140000" },
                          { "eventName": "Soccer Match", "category": "holiday", "color": "green","date":"1492887600000" },
                          { "eventName": "Public Holiday", "category": "holiday", "color": "green","date":"1494173940000" }]'
          >

          </pf-calendar-events>

Classic Calendar Example

 <pf-calendar-events
                  calendarstyle="classic-calendar"
                  data='[
                          { "eventName": "Lunch Meeting w/ Mark", "calendar": "Work", "color": "orange","date":"1491322091394" },
                          { "eventName": "Giants vs Packers", "calendar": "sport", "color": "blue","date":"1499185140000" },
                          { "eventName": "Soccer", "calendar": "sport", "color": "blue","date":"1491581940000" },
                          { "eventName": "Public Holiday", "calendar": "holiday", "color": "green","date":"1494173940000" }]'
          >

          </pf-calendar-events>

default value of 'calendarstyle' is 'material-calendar'

Types of calendar

You 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.

CRUD operations

Buttons / icons are provided to enable Adding, deleting or updating an event (meeting, reminder, appointment etc) Material based button and icons are provided to enable these operations. For firebase events data, please see our firebase element

Customization of Calendar Events/Data (your meetings, appointments, reminders etc)

Of 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

This custom element provides you two generic ways that again can be further customized

a. 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

b. By providing an array of data. (Calendar events, appointments, meetings, reminders etc.)

CRUD operations

Our 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.

Custom Event	Description
`event-add`	Add event retuns current selected date ('e.detail.date'), fired when user press add event button
`event-edit`	Edit event retuns event ('e.detail.event'),fired when user press edit event button
`event-delete`	Delete event retuns event ('e.detail.event'),fired when user press delete event button
`event-select`	Event Select retuns event ('e.detail.event'),fired when user click on any event
`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

 <pf-calendar-events
data='[
                          { "eventName": "Lunch Meeting W/ Mark", "category": "Work", "color": "orange","date":"1491322091394" },
                          { "eventName": "Rob Birthday  ", "category": "Birthday", "color": "blue","date":"1491322091394" },
                          { "eventName": "Appointment With Dr David", "category": "Medical", "color": "yellow","date":"1491322091394" },
                          { "eventName": "Public Holiday", "category": "holiday", "color": "green","date":"1492196400000" },
                          { "eventName": "Due date of Project Dilivery", "category": "Work", "color": "orange","date":"1492455600000" },
                          { "eventName": "Lunch Meeting W/ Mark", "category": "Work", "color": "orange","date":"1495322091394" },
                          { "eventName": "Rob Birthday  ", "category": "Birthday", "color": "blue","date":"1495322091394" },
                          { "eventName": "Appointment With Dr David", "category": "Medical", "color": "yellow","date":"1495047600000" },
                          { "eventName": "Public Holiday", "category": "holiday", "color": "green","date":"1495196400000" },
                          { "eventName": "Due date of Project Dilivery", "category": "Work", "color": "orange","date":"1495455600000" },
                           { "eventName": "Lunch Meeting W/ Mark", "category": "Work", "color": "orange","date":"1497322091394" },
                          { "eventName": "Rob Birthday  ", "category": "Birthday", "color": "blue","date":"1497322091394" },
                          { "eventName": "Appointment With Dr David", "category": "Medical", "color": "yellow","date":"1497047600000" },
                          { "eventName": "Public Holiday", "category": "holiday", "color": "green","date":"1497196400000" },
                          { "eventName": "Due date of Project Dilivery", "category": "Work", "color": "orange","date":"1497455600000" },
                           { "eventName": "Lunch Meeting W/ Mark", "category": "Work", "color": "orange","date":"1500322091394" },
                          { "eventName": "Rob Birthday  ", "category": "Birthday", "color": "blue","date":"1500322091394" },
                          { "eventName": "Appointment With Dr David", "category": "Medical", "color": "yellow","date":"150047600000" },
                          { "eventName": "Public Holiday", "category": "holiday", "color": "green","date":"150096400000" },
                          { "eventName": "Due date of Project Dilivery", "category": "Work", "color": "orange","date":"15005600000" },
                            { "eventName": "Lunch Meeting W/ Mark", "category": "Work", "color": "orange","date":"1502922091394" },
                          { "eventName": "Rob Birthday  ", "category": "Birthday", "color": "blue","date":"1502922091394" },
                          { "eventName": "Appointment With Dr David", "category": "Medical", "color": "yellow","date":"1502947600000" },
                          { "eventName": "Public Holiday", "category": "holiday", "color": "green","date":"1502996400000" },
                          { "eventName": "Due date of Project Dilivery", "category": "Work", "color": "orange","date":"1502955600000" },
                          { "eventName": "Appoint ment With Dr David", "category": "Medical", "color": "yellow","date":"1499185140000" },
                          { "eventName": "Soccer Match", "category": "holiday", "color": "green","date":"1492887600000" },
                          { "eventName": "Public Holiday", "category": "holiday", "color": "green","date":"1494173940000" }]'
          >

          </pf-calendar-events>

Custom property	Description	Default
`--pf-calendar-bg-color`	Calendar background	#4A4A4A
`--pf-calendar-width`	Calendar Width	420px
`--pf-calendar-height`	Calendar Height	570px
`--pf-calendar-header-background`	Calendar Header Background	rgba(66, 66, 66, 1)
`--pf-calendar-header-height`	Calendar Header height	50px
`--pf-calendar-month-title-font-size`	Font size of month on header	20px
`--pf-calendar-month-title-line-height`	Calendar Header title line Height	rgba(66, 66, 66, 1)
`--pf-calendar-header-left-arrow-color`	Previous Month arrow color	rgba(160, 159, 160, 1)
`--pf-calendar-header-right-arrow-color`	Next Month arrow color	rgba(160, 159, 160, 1)
`--pf-calendar-month-title-color`	Month Title color	#000
`--pf-calendar-week-bg`	Background color of week	#4A4A4A
`--pf-calendar-day-bg`	Day Background	#4A4A4A
`--pf-calendar-day-color`	color of date	#000
`--pf-calendar-other-day-color`	color of previous and next month date	rgba(255, 255, 255, .3)
`--pf-calendar-today-color`	Current date Color	rgba(156` 202, 235, 1)
`--pf-calendar-day-name-color`	Name of Day color e.g(MON,TUE,WED)	rgba(255` 255, 255, .5)
`--pf-calendar-event-detail-bg`	Event box background	rgba(164, 164, 164, 1)
`--pf-calendar-event-color`	color of label "Event"	#000
`--pf-calendar-addevent-button-bg-color'	Add Event Button color	rgba(164, 164, 164, 1)
`--pf-calendar-addevent-button-text-color`	Add Event text color	#fff
`--pf-calendar-addevent-button-hover-color`	Add event button hover color	rgba(170, 170, 170, 1)
`--pf-calendar-addbutton-disply`	to hide button set "none"	inline-block
`--pf-calendar-deletebutton-disply`	to hide button set "none"	inline
`--pf-calendar-editbutton-disply`	to hide button set "none"	inline
`--pf-calendar-legend-bg`	Background color of legend bar	rgba(60, 60, 60, 1)

Viewing Your Application

$ polymer serve

Building Your Application

$ polymer build

This will create a build/ folder with bundled/ and unbundled/ sub-folders containing a bundled (Vulcanized) and unbundled builds, both run through HTML, CSS, and JS optimizers.

You can serve the built versions by giving polymer serve a folder to serve from:

$ polymer serve build/bundled

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.

Contributing

Comments, questions, suggestions, issues, and pull requests are all welcome.

Give us a Star on GitHub.

Get in touch with the team

Joing us at

[Twitter](Follow @polymerio)
[Facebook] (https://www.facebook.com/polymerjs)
[Google+] (https://plus.google.com/116168214823506639166)
[YouTube] (https://www.youtube.com/channel/UCDKqvDyAn_QTBvCPvrZKTkw)
[Website] (https://polymerjs.io)

Some ways to help:

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.
Report bugs: File issues for the elements in their respective GitHub projects.
Send pull requests: If you want to contribute code, check out the development instructions below.

We encourage you to read the contribution instructions by GitHub also.

License

MIT License

Name		Name	Last commit message	Last commit date
Latest commit History 57 Commits
.idea		.idea
demo		demo
images		images
js		js
test		test
.gitignore		.gitignore
.travis.yml		.travis.yml
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
bower.json		bower.json
index.html		index.html
package.json		package.json
pf-calendar-events.html		pf-calendar-events.html
pf-calendar-events.iml		pf-calendar-events.iml
polymer.json		polymer.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

pf-elements

Demo

Install the Polymer-CLI

PF Calendar Events

Learn more

Take me to webcomponents.org ›

Customization and usage

Customization of look and feel

Material Calendar Example

Classic Calendar Example

Types of calendar

CRUD operations

Customization of Calendar Events/Data (your meetings, appointments, reminders etc)

CRUD operations

Viewing Your Application

Building Your Application

Running Tests

Contributing

Get in touch with the team

Some ways to help:

License

About

Releases 9

Packages

Contributors 2

Languages

License

PFElements/pf-calendar-events

Folders and files

Latest commit

History

Repository files navigation

pf-elements

Demo

Install the Polymer-CLI

PF Calendar Events

Learn more

Take me to webcomponents.org ›

Customization and usage

Customization of look and feel

Material Calendar Example

Classic Calendar Example

Types of calendar

CRUD operations

Customization of Calendar Events/Data (your meetings, appointments, reminders etc)

CRUD operations

Viewing Your Application

Building Your Application

Running Tests

Contributing

Get in touch with the team

Some ways to help:

License

About

Topics

Resources

License

Stars

Watchers

Forks

Releases 9

Packages 0

Contributors 2

Languages

Packages