https://github.com/rhanb/nativescript-fancy-calendar

Fancy calendar for NativeScript :smile: :beers:
https://github.com/rhanb/nativescript-fancy-calendar

android angular calendar ios javascript nativescript typescript

Last synced: 2 months ago
JSON representation

Fancy calendar for NativeScript :smile: :beers:

• Host: GitHub
• URL: https://github.com/rhanb/nativescript-fancy-calendar
• Owner: rhanb
• License: other
• Created: 2017-04-11T18:15:39.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-11-13T09:00:33.000Z (about 6 years ago)
• Last Synced: 2024-09-27T16:17:51.695Z (3 months ago)
• Topics: android, angular, calendar, ios, javascript, nativescript, typescript
• Language: TypeScript
• Homepage:
• Size: 1.97 MB
• Stars: 21
• Watchers: 5
• Forks: 6
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm](https://img.shields.io/npm/v/nativescript-fancy-calendar.svg)](https://www.npmjs.com/package/nativescript-fancy-calendar)

[![npm](https://img.shields.io/npm/dt/nativescript-fancy-calendar.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-fancy-calendar)

## NativeScript Fancy Calendar

NativeScript plugin for [iOS](https://github.com/WenchaoD/FSCalendar) and [Android](https://github.com/prolificinteractive/material-calendarview).

This plugin is not production ready, and there is still a lots of work to do on it. That's why I advise you to use the [nativescript-pro-ui](https://www.npmjs.com/package/nativescript-pro-ui) calendar which is supported by Telerik itself :beers:.

### Screenshots

  iOS    |  Android

-------- | ---------

![iOS](screenshots/sample_ios.png) | ![Android](screenshots/sample_android.png)

### Install 

```bash

tns plugin add nativescript-fancy-calendar

```

### Documentation

component.html

```xml

```

component.ts

``` typescript

import {

    Calendar,

    SELECTION_MODE, // Multiple or single

    DISPLAY_MODE, // Week or month

    CalendarEvent, // little dots 

    Appearance, // style customisation

    SCROLL_ORIENTATION, // scroll orientation for iOS

    CalendarSubtitle, // subtitles for iOS

    Settings // Settings interface

} from 'nativescript-fancy-calendar';

registerElement('Calendar', () => Calendar);

@Component({

    selector: "ns-yourcomponent",

    templateUrl: "yourcomponent.component.html",

})

export class YourComponent {

    settings: any;

    subtitles: CalendarSubtitle[];

    events: CalendarEvent[];

    public appearance: Appearance;

    private _calendar: Calendar;

    

    public calendarLoaded(event) {

         this.settings = {

            displayMode: DISPLAY_MODE.MONTH, 

            scrollOrientation: SCROLL_ORIENTATION.HORIZONTAL,

            selectionMode: SELECTION_MODE.MULTIPLE,

            firstWeekday: 3, // SUN: O, MON: 1, TUES: 2 etc..

            maximumDate: nextMonth, // Can't go further than this date

            minimumDate: lastMonth // can't go earlier than this date

        };

        this.appearance = {

            weekdayTextColor: "white", //color of Tue, Wed, Thur.. (only iOS)

            headerTitleColor: "white", //color of the current Month (only iOS)

            eventColor: "white", // color of dots

            selectionColor: "#FF3366", // color of the circle when a date is clicked

            todayColor: "#831733", // the color of the current day

            hasBorder: true, // remove border (only iOS)

            todaySelectionColor: "#FF3366", // today color when seleted (only iOS)

            borderRadius: 25 // border radius of the selection marker

        };

    }

    

    public dateSelected(event) {

        console.log('date selected');

    }

    public monthChanged(event) {

        console.log('month selected');

    }

}

```