Giter Club home page Giter Club logo

ionic2-calendar's Introduction

ionic2-calendar2

(x)Cross Mobile Engine: Ionic2 Calendar Component

Donate

  • That project support base calendar directive with Month, Week, Day views that can easy to integrate with your mobile app.

  • It's just for fun and expose a part my research on calendar processing with Google Calendar, Apple Calendar, iCalendar, etc.

  • Some source in that library should be easy to apply but maybe hard to extends to adapt on what you need. It's a message for user want developer extend that library and think about it does 80% work. The rest, 20% hardest things for your developer so should play nice. :D

Read more about source code, class used in this repository.

Getting Started

Installing

# Clone the repository into xmobe/ui folder
npm install ionic2-calendar2 --save

Using

# app.module.ts
import { CalendarModule } from 'ionic2-calendar2';
imports: [
    CalendarModule,
]
# *.html
<calendar></calendar>

Calendar Month View

  • Flex base UI (not table).
  • Expose date object directly for later use.
  • You can config moment locale from outside to localize calendar information.

Calendar Week View

  • will update with (50 stars)

Calendar Day View

  • will update with (150 stars)

Todo List

  • Not directive or reusable component yet. (updated 5th Aug 2016)
  • Configuration
  • Swipe to change Month, Week, Day view
  • npm install and use directly

Environment

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

System:

Node : v8.4.0
npm  : 5.5.1 
OS   : macOS Sierra

Misc:

backend : pro

Common Errors

# lack moment
npm install moment --save
# lack next previous month buttons
npm install font-awesome --save
# Oganize font-awesome resources in your ionic2 project to meet your desire.
project-root-folder
  ├─ src                         
  |  └─ assets                   
  |     ├─ fonts    
  |     └─ font-awesome              
  └─ ...
       

Contributors

  • Quang Anh LE (Arkay Lee)

Update

  • 26th Nov 2017: update dependencies angular 5.0.0, ionic 3.9.2
  • 17th Nov 2017: update dependencies Common Errors
  • 31th Oct 2017: update dependencies angular 4.4.4, ionic 3.8
  • 23th Oct 2017: update dependencies log4js, angular 4.3.1
  • 20th Oct 2017: update new source base 0.1.3, new UI look n feel
  • 18th Nov 2016: update npm version 0.0.1
  • 6th Aug 2016: update template.

Thank Kenneth Hou for an inspired calendar style https://dribbble.com/shots/1269664-Calendar-Screen.

ionic2-calendar's People

Contributors

ionitron avatar quanganh206 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.