2016-08-09 11 views
0

現在、フルカレンダーに取り組んでいます。誰かが私を助けてくれるのだろうかと思っていました。これまでは、ユーザーが日を選択できるカレンダーがあります。クリックすると、特定の日は色が変わります。カレンダーの日数を確認してください

私の目標は、クリックされた日にチェックマークを付けることです。誰でもこれがどのように達成できるか知っていますか?

添付されているコードはこれまでにあります。おかげでトン:D enter image description here

答えて

0

これはUnicodeのチェックマークを使用するように設定だけでなく、あなたが

$('#calendar').fullCalendar({ 
 
    /* Add i tag to all day cells as placeholder for checkmark */ 
 
    dayRender: function(date, cell) { 
 
    var check = document.createElement('i'); 
 
    check.classList.add('checkbox'); 
 
    cell.append(check); 
 
    }, 
 
    dayClick: function(date, jsEvent, view) { 
 
    var check = $(this).find('i.checkbox'); /* find the i.checkbox */ 
 
    /* Simpler than the below but if you need to do other things, if/else better approach */ 
 
    check.toggleClass('marked'); 
 
    /* if (check.hasClass('marked')) { // font-awesome: fa-check 
 
     check.removeClass("marked"); // font-awesome: fa fa-check 
 
    } else { 
 
     check.addClass("marked"); // font-awesome: fa fa-check 
 
    } */ 
 
    }, 
 
    events: [{ 
 
    start: moment().format('YYYY-MM-DD'), 
 
    end: moment().add(1, 'day').format('YYYY-MM-DD'), 
 
    title: 'Event 1' 
 
    }, { 
 
    start: moment().add(1, 'day').format('YYYY-MM-DD'), 
 
    end: moment().add(3, 'day').format('YYYY-MM-DD'), 
 
    title: 'Event 2' 
 
    }, ] 
 
});
i.checkbox.marked::before { 
 
    content: '\2713'; 
 
    /* unicode check mark */ 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.0/fullcalendar.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.0/fullcalendar.min.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<div id='calendar'> 
 

 
</div>

が好きなら、フォント-素晴らしいを使用するように変更するためのコメントが含まれています
関連する問題