vue2.0 Project Calendar.js (Calendar component encapsulation)

Recently has been idle to do nothing, then think about doing their own personal projects, also want to say can use now more popular of some MVVM framework to do, so choose a technology stack vue2.0+vue-router+vuex+webpack to do, do is also multi-page application, Using Vue-router, it is also wanted to say that the multi-function modular, single-module spa, achieve higher results. Of course now still in the process of doing, if interested can come over star, haha, https://github.com/xiaobinwu/Wuji,git clone down to see.

Today is to say in the process of doing this project, I want to add a calendar function, but find a lot of plug-ins, not much is my mind, so I want to say that they write one, but the imagination is too good, technical ability is not enough, can not write, here omit 10,000 words. Finally find the Baidu calendar is quite in line with the calendar I want to function, but I want to more self-tuning better, so take this to do a bit of modification. The result looks like this:

Assign the last calendar component to a global variable, exposing the method in module mode to configure the calendar:

    <DivID= "cal">        <DivID= "Top">            <Divclass= "Select">                <SelectID= "Year-select"></Select>&nbsp;years<SelectID= "Month-select"></Select>&nbsp;Month</Div>            <Divclass= "Step">                <spanID= "Prev"><</span>                <spanID= "Next">></span>                                           </Div>        </Div>        <ulID= "wk">            <Li>One</Li>            <Li>Two</Li>            <Li>Three</Li>            <Li>Four</Li>            <Li>Five</Li>            <Li><b>Six</b></Li>            <Li><b>Day</b></Li>        </ul>        <DivID= "cm"></Div>        <DivID= "BM">            <Divclass= "Heavenly-branch">                <spanID= "Heavenly"></span>Years&nbsp;[<spanID= "Branch"></span>]</Div>            <ahref= "javascript:;;"ID= "Now-date">Back to today</a>        </Div>    </Div>

Js:

    calendar.init ({        function(cell, datedata) {            console.log (datedata);            Alert (' you clicked on ' + datedata.solaryear + ' + ' + ' + datedata.solarmonth + ' month ' + datedata.solardate + ' Day ');}    } );

So the source code to make some comments, in order to modify later, you can go to see the detailed code: https://github.com/xiaobinwu/calendar.js

vue2.0 Project Calendar.js (Calendar component encapsulation)