Giter VIP home page Giter VIP logo

mithril-calendar's Introduction

mithril-calendar

A calendar component for mithril.

NPM

You can see a demo here.

installation

You can get a copy with bower or npm or just download it from the dist/ folder, here.

webpack/browserify/etc

var MithrilCalendar = require('mithril-calendar');

requirejs

define(['mithril','MithrilCalendar'], function(m,MithrilCalendar){
  
});

plain browser globals

<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.1.30/mithril.min.js"></script>
<script src="http://konsumer.github.io/mithril-calendar/dist/MithrilCalendar.min.js"></script>

usage

Have a look at index.js to see how to construct the view, if you don't want it to look like mine, or want to leave out links or whatever, just construct your own view from stuff exposed in the controller.

var MyComponent = {
  controller: function(){
    var now = new Date();
    this.year = m.route.param('year') ? m.route.param('year') : now.getFullYear();
    this.month = m.route.param('month') ? m.route.param('month') : now.getMonth()+1;
    this.calendar = new MithrilCalendar.controller(this.year, this.month);
  },
  view: function(ctrl){
    return MithrilCalendar.view(ctrl.calendar);
  }
}

You will also need some CSS. I use LESS, so you can use that from dist/MithrilCalendar.less or the CSS file I built from it.

You can also get it via CDN, like this:

<link href="http://konsumer.github.io/mithril-calendar/dist/MithrilCalendar.min.css" media="all" rel="stylesheet" type="text/css" />

mithril-calendar's People

Contributors

konsumer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

mithril-calendar's Issues

Including option for adding class to event

Hi there,

Thanks for a great tiny plugin for mithril I found useful.

I recently ran into a case that need to specify different color highlight for different event, I want to contribute here.

Basiclly, in the library line 32 it was

classes += '.event'

I would changed it to

var optionClass = events[k].class == undefined ? '' : "."+events[k].class
        classes += '.event'+ optionClass;

So when adding event, after specifying the key for it, I added an attribute called "class" the the event as follow example

events[ (now.getMonth() + 1) + '/21/' + now.getFullYear()] = m('span', [
            "Event 1 ",
            m('b', 'HTML ok')
        ]);
events[ (now.getMonth() + 1) + '/21/' + now.getFullYear()] .class = 'green'

and I have a custom stylesheet that override the 'event' class for example

.calendar .green { background: green !important; }

Thanks David for a great plugin

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.