NativeScript-Calendar-WeekView :calendar:

NativeScript Calendar Week View provides week view and day view.It allow creating events and viewing them in week view.The plugin is highly under construction so any feedbacks and PRs are most Welcome.

$3

- [x] Plugin Setup
- [x] WeekView with Properties Enabled
- [x] Adding of Event
- [ ] Delete Event
- [ ] Async Event
- [ ] Gesture Events

Demo Run

1 Day View | 3 Day View | 7 Day View
---------- | ---------- | ----------
!alt text | !alt text |!alt text

#### Native Libraries:
Android |
---------- |
alamkanak/Android-Week-View

Installation

From your command prompt/termial go to your app's root folder and execute:

npm i nativescript-calendar-weekview --save

Usage

#### XML:
``XML
xmlns:CalendarWeekView="nativescript-calendar-weekview" loaded="pageLoaded" class="page">







`

$3

`TS

import {CalendarWeekView} from 'nativescript-calendar-weekview';
public CalendarWeekView: CalendarWeekView;

`

Angular + Typescript:


`javascript
import {Component, ElementRef, ViewChild} from '@angular/core';
import {registerElement} from "nativescript-angular/element-registry";

registerElement("CalendarWeekView", () => require("nativescript-calendar-weekview").CalendarWeekView);

@Component({
selector: 'calendar-weekview-example',
template:











})
export class CalendarViewExample {

@ViewChild("CalendarWeekView") CalendarWeekView: ElementRef;

addEvent() {
let event = this.CalendarWeekView.nativeElement;
// provide params in this order
// addEvent(id,name,startYear, startMonth, startDay,startHour,startMinute,endYear,endMonth, endDay, endHour,endMinute,eventColor)
event.addEvent(1, "first Event", 2017, 3, 14, 3, 3, 2017, 3, 14, 7, 5, "#87d288");
event.addEvent(2, "Second Event", 2017, 3, 15, 5, 3, 2017, 3, 15, 7, 5, "#59DBE0");
event.addEvent(3, "Third Event", 2017, 3, 14, 8, 3, 2017, 3, 14, 10, 5, "#F66C4E");

}
}

}
``

Attributes

textSize - (int) - optional

Attribute to specify the size of text in weekview.

hourHeight - (int) - optional

Attribute to specify the size of text in weekview.

headerColumnPadding - (int) - optional

Attribute to specify the padding between header columns in weekview.

headerRowPadding - (int) - optional

Attribute to specify the padding between header rows in weekview.

headerColumnTextColor - (color string) - optional

Attribute to specify the text color of column headers in weekview.

columnGap - (int) - optional

Attribute to specify the gap between columns in weekview.

headerRowBackgroundColor - (color string) - optional

Attribute to specify the background color of header rows in weekview.

dayBackgroundColor - (color string) - optional

Attribute to specify the color of day i.e. not today in weekview.

noOfVisibleDays - (int) - optional

Attribute to specify the visibility of days (i.e.1,3,7 days) in weekview.

todayBackgroundColor - (color string) - optional

Attribute to specify the color of today bacground in weekview.

headerColumnBackground - (color string) - optional

Attribute to specify the background color of column headers in weekview.

Methods

addEvent ( id, name, startYear, startMonth, startDay, startHour, startMinute, endYear, endMonth, endDay, endHour, endMinute, eventColor )

Add Event with necessary Parameters passed and rendered in calendar.