Skip to content

Commit 44b2c15

Browse files
NaqashPixyNaqashPixy
committed
Merge remote-tracking branch 'origin/master'
2 parents c5ee4ea + 034941e commit 44b2c15

File tree

1 file changed

+112
-13
lines changed

1 file changed

+112
-13
lines changed

‎README.md‎

Lines changed: 112 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,48 @@
22
# pf-elements
33
A Polymer 2.0 based collection of reusable web components
44

5+
[![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&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
6+
57
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/owner/my-element)
68

79
## Demo
8-
[Click here for docs & demo](https://github.com/PFElements/pf-calendar-events/blob/master/demo/index.html)
9-
10+
[Click here for docs & demo](https://pfelements.github.io/pf-calendar-events/components/pf-calendar-events/demo/index.html)
11+
_[Demo and API docs](https://elements.polymer-project.org/elements/PFElements/pf-calendar-events)_
12+
_[Demo and API docs 2](https://elements.polymer-project.org/elements/pf-calendar-events)_
1013

1114
## Install the Polymer-CLI
1215

1316
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your application locally.
14-
## Example
17+
18+
# PF Calendar Events
19+
20+
An Advanced/composite Polymer 2.0 based custom elements that can be used to set Events/appointments/meetings in a calendar.
21+
22+
| Element Name | Latest Version (Bower) | Npm version | Build Status |
23+
|--------------|------------------------|--------------|--------------|
24+
| [pf-calendar-events](https://github.com/PFElements/pf-calendar-events) | [![GitHub version](https://badge.fury.io/gh/PFElements%2Fpf-calendar-events)](https://badge.fury.io/gh/PFElements%2Fpf-calendar-events) | [![npm version](https://badge.fury.io/js/pf-calendar-events.svg)](https://www.npmjs.com/package/pf-calendar-events) |[![Build Status](https://travis-ci.org/PFElements/pf-calendar-events.svg?branch=master)](https://travis-ci.org/PFElements/pf-calendar-events) |
25+
26+
## Learn more
27+
28+
See the list of elements, demos, and documentation by browsing this collection on webcomponents.org:
29+
30+
### [Take me to webcomponents.org ›](https://www.webcomponents.org/element/PFElements/pf-calendar-events)
31+
32+
---
33+
# Customization and usage
34+
35+
`<pf-calendar-events></pf-calendar-events>` can be customized in a number of ways
36+
37+
## Customization of look and feel
38+
39+
By default you have two general options
40+
41+
a. material-calendar
42+
43+
b. classic-calendar
44+
45+
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.
46+
#### material Calendar Example
1547
<!---
1648
```
1749
<custom-element-demo>
@@ -25,27 +57,88 @@ First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polyme
2557
-->
2658
```html
2759

28-
# PF Calendar Events
2960

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

3262

33-
[pf-calendar-events](https://github.com/PFElements/pf-calendar-events) [![GitHub version](https://badge.fury.io/gh/PFElements%2Fpf-calendar-events.svg)](https://badge.fury.io/gh/PFElements%2Fpf-calendar-events) [![Build Status](https://travis-ci.org/PFElements/pf-calendar-events.svg?branch=master)](https://travis-ci.org/PFElements/pf-calendar-events)
63+
<pf-calendar-events
64+
calendarstyle="material-calendar"
65+
data='[
66+
{ "eventName": "Lunch Meeting w/ Mark", "calendar": "Work", "color": "orange","date":"1491322091394" },
67+
{ "eventName": "Giants vs Packers", "calendar": "sport", "color": "blue","date":"1499185140000" },
68+
{ "eventName": "Soccer", "calendar": "sport", "color": "blue","date":"1491581940000" },
69+
{ "eventName": "Public Holiday", "calendar": "holiday", "color": "green","date":"1494173940000" }]'
70+
>
3471

35-
## Learn more
72+
</pf-calendar-events>
73+
```
74+
#### Classic Calendar Example
75+
```html
76+
<pf-calendar-events
77+
calendarstyle="classic-calendar"
78+
data='[
79+
{ "eventName": "Lunch Meeting w/ Mark", "calendar": "Work", "color": "orange","date":"1491322091394" },
80+
{ "eventName": "Giants vs Packers", "calendar": "sport", "color": "blue","date":"1499185140000" },
81+
{ "eventName": "Soccer", "calendar": "sport", "color": "blue","date":"1491581940000" },
82+
{ "eventName": "Public Holiday", "calendar": "holiday", "color": "green","date":"1494173940000" }]'
83+
>
3684

37-
See the list of elements, demos, and documentation by browsing this collection on webcomponents.org:
85+
</pf-calendar-events>
86+
```
87+
default value of 'calendarstyle' is 'material-calendar'
88+
### Types of calendar
89+
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.
90+
91+
### CRUD operations
92+
93+
Buttons / icons are provided to enable Adding, deleting or updating an event (meeting, reminder, appointment etc)
94+
Material based button and icons are provided to enable these operations.
95+
For firebase events data, please see our firebase element
96+
97+
## Customization of Calendar Events/Data (your meetings, appointments, reminders etc)
98+
99+
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
100+
101+
This custom element provides you two generic ways that again can be further customized
102+
103+
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
104+
105+
b. By providing an array of data. (Calendar events, appointments, meetings, reminders etc.)
106+
107+
### CRUD operations
108+
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.
109+
110+
111+
Custom Event | Description
112+
---------------------------------|----------------------------------------
113+
`event-add` | Add event retuns current selected date ('e.detail.date'), fired when user press add event button
114+
`event-edit` | Edit event retuns event ('e.detail.event'),fired when user press edit event button
115+
`event-delete` | Delete event retuns event ('e.detail.event'),fired when user press delete event button
116+
`event-select` | Event Select retuns event ('e.detail.event'),fired when user click on any event
117+
`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
118+
119+
120+
121+
<!---
122+
```
123+
<custom-element-demo>
124+
<template>
125+
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
126+
<link rel="import" href="pf-calendar-events.html">
127+
<next-code-block></next-code-block>
128+
</template>
129+
</custom-element-demo>
130+
```
131+
-->
132+
```html
38133

39-
### [Take me to webcomponents.org ›](https://www.webcomponents.org/element/PFElements/pf-pageindicator)
40134

41-
---
42135

43136

44137
<pf-calendar-events
45138
data='[
46139
{ "eventName": "Lunch Meeting w/ Mark", "calendar": "Work", "color": "orange","date":"1491322091394" },
47-
{ "eventName": "WI vs Pak", "calendar": "sport", "color": "blue","date":"1499185140000" },
48-
{ "eventName": "WI vs Pak", "calendar": "sport", "color": "blue","date":"1491581940000" },
140+
{ "eventName": "Giants vs Packers", "calendar": "sport", "color": "blue","date":"1499185140000" },
141+
{ "eventName": "Soccer", "calendar": "sport", "color": "blue","date":"1491581940000" },
49142
{ "eventName": "Public Holiday", "calendar": "holiday", "color": "green","date":"1494173940000" }]'
50143
>
51144

@@ -115,6 +208,12 @@ Your application is already set up to be tested via [web-component-tester](https
115208

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

211+
### Get in touch with the team
212+
213+
Joing 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&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
214+
215+
- [Twitter](<a href="https://twitter.com/polymerjs" class="twitter-follow-button" data-show-count="false">Follow @polymerjs</a>)
216+
- [Facebook] (https://www.facebook.com/polymerjs)
118217

119218
### Some ways to help:
120219

@@ -126,4 +225,4 @@ We encourage you to read the [contribution instructions by GitHub](https://guide
126225

127226
## License
128227

129-
MIT License
228+
MIT License

0 commit comments

Comments
 (0)