Nativescript Calendar WeekView allow adding events to weekview and styling them.
npm install nativescript-calendar-weekview


- [x] Plugin Setup
- [x] WeekView with Properties Enabled
- [x] Adding of Event
- [ ] Delete Event
- [ ] Async Event
- [ ] Gesture Events
1 Day View | 3 Day View | 7 Day View
---------- | ---------- | ----------
!alt text | !alt text |!alt text
#### Native Libraries:
Android |
---------- |
alamkanak/Android-Week-View
npm i nativescript-calendar-weekview --save
XML
xmlns:CalendarWeekView="nativescript-calendar-weekview" loaded="pageLoaded" class="page">
`$3
`TSimport {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");
}
}
}
``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.
addEvent ( id, name, startYear, startMonth, startDay, startHour, startMinute, endYear, endMonth, endDay, endHour, endMinute, eventColor )
Add Event with necessary Parameters passed and rendered in calendar.