NativeScript-Calendar-WeekView :calendar

NativeScript Calendar Week View 提供周视图和日视图。它允许创建事件并在周视图中查看它们。该插件正在积极开发中，因此任何反馈和PR都备受欢迎。

建设中

• [x] 插件设置
• [x] 启用带有属性的周视图
• [x] 添加事件
• [ ] 删除事件
• [ ] 异步事件
• [ ] 手势事件

演示运行

1天视图	3天视图	7天视图

原生库

安装

在命令提示符/termial 中进入您的应用程序根目录，然后执行

npm i nativescript-calendar-weekview --save

用法

XML

<Page  xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:CalendarWeekView="nativescript-calendar-weekview" loaded="pageLoaded" class="page">
    <ActionBar title="NativeScript-Calendar-WeekView" />
    <ScrollView>
         <StackLayout>
   <CalendarWeekView:CalendarWeekView headerColumnBackground="#ffffff" todayBackgroundColor="#1848adff" noOfVisibleDays="3"  dayBackgroundColor="#05000000" headerRowBackgroundColor="#ffefefef" columnGap="30" headerColumnTextColor="#8f000000" headerRowPadding="30" headerColumnPadding="30" hourHeight="120" textSize="30" />
    </StackLayout>
    </ScrollView>
</Page>

TS

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

Angular + Typescript

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: `
        <ActionBar title="Nativescript-Calendar-WeekView"  style="background-color:#ED2831; color:white">
        <ActionItem  (tap)="addEvent()">
        <Label class="actionItemLabel" text="Add" color="white" ></Label>
        </ActionItem>
        </ActionBar>
        <StackLayout>
        <CalendarWeekView #CalendarWeekView  headerColumnBackground="#ffffff" todayBackgroundColor="#1848adff" noOfVisibleDays="3"  dayBackgroundColor="#05000000" headerRowBackgroundColor="#ffefefef" columnGap="30" headerColumnTextColor="#8f000000" headerRowPadding="30" headerColumnPadding="30" hourHeight="120" textSize="30" >
    </CalendarWeekView>
        </StackLayout>
    
    `
})
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");

    }
    }

}

属性

textSize - (int) - 可选

指定周视图中文本大小的属性。

hourHeight - (int) - 可选

指定周视图中文本大小的属性。

headerColumnPadding - (int) - 可选

指定周视图中标题列之间填充的属性。

headerRowPadding - (int) - 可选

指定周视图中标题行之间填充的属性。

headerColumnTextColor - (color string) - 可选

指定周视图中列标题的文本颜色的属性。

columnGap - (int) - 可选

指定周视图中列之间间隙的属性。

headerRowBackgroundColor - (color string) - 可选

指定周视图中标题行的背景颜色的属性。

dayBackgroundColor - (color string) - 可选

指定周视图中天（即非今天）的颜色属性。

noOfVisibleDays - (int) - 可选

指定周视图中天（即1、3、7天）的可见性的属性。

todayBackgroundColor - (color string) - 可选

指定周视图中今天背景颜色的属性。

headerColumnBackground - (color string) - 可选

指定周视图中列标题的背景颜色的属性。

方法

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

使用必要参数添加事件并在日历中渲染。