使用CLNDR.js創建日曆

我想用CLNDR.js創建日曆，但我不知道如何開始... 我看到了github頁面：https://github.com/kylestetz/CLNDR#dependencies 並在我的電腦上安裝了github存儲庫也。但我的問題是：我如何創建一個沒有在github存儲庫中顯示的示例的日曆... 我的意思是，我不明白那裏的頁面上的示例代碼，我想對「如何創造」。任何人都可以幫助我嗎？我需要哪些文件，我們如何實現......等等使用CLNDR.js創建日曆

來源

2014-03-07 Damiii

我在JSFiddle上爲您做了一個例子。

你需要jquery，underscore.js，moment.js和clndr.js本身。全部寫在official README。

簡言之，創建一個空的div（容器）和HTML代碼內的templete：

<div id="mini-clndr"></div> 

<script id="calendar-template" type="text/template"> 
    <div class="controls"> 
    <div class="clndr-previous-button">&lsaquo;</div><div class="month"><%= month %></div><div class="clndr-next-button">&rsaquo;</div> 
    </div> 

    <div class="days-container"> 
    <div class="days"> 
     <div class="headers"> 
     <% _.each(daysOfTheWeek, function(day) { %><div class="day-header"><%= day %></div><% }); %> 
     </div> 
     <% _.each(days, function(day) { %><div class="<%= day.classes %>" id="<%= day.id %>"><%= day.day %></div><% }); %> 
    </div> 
    </div> 
</script>

然後添加一些JS如docs描述：

var currentMonth = moment().format('YYYY-MM'); 
var nextMonth = moment().add('month', 1).format('YYYY-MM'); 
var events = [ 
    { date: currentMonth + '-' + '10', title: 'Persian Kitten Auction', location: 'Center for Beautiful Cats' }, 
    { date: currentMonth + '-' + '19', title: 'Cat Frisbee', location: 'Jefferson Park' }, 
    { date: currentMonth + '-' + '23', title: 'Kitten Demonstration', location: 'Center for Beautiful Cats' }, 
    { date: nextMonth + '-' + '07', title: 'Small Cat Photo Session', location: 'Center for Cat Photography' } 
]; 

$('#mini-clndr').clndr({ 
    template: $('#calendar-template').html(), 
    events: events, 
    clickEvents: { 
    click: function(target) { 
     if(target.events.length) { 
     var daysContainer = $('#mini-clndr').find('.days-container'); 
     daysContainer.toggleClass('show-events', true); 
     $('#mini-clndr').find('.x-button').click(function() { 
      daysContainer.toggleClass('show-events', false); 
     }); 
     } 
    } 
    }, 
    adjacentDaysChangeMonth: true 
});

來源

2014-03-21 13:17:22 mie

使用CLNDR.js創建日曆

回答

相關問題