2017-07-06 16 views
-1

イベントがドットで表されるfullCalendarのバージョンを作成しました(イベントの詳細はページの他の場所に表示されます)。デフォルトでは、イベントドットの色は現在強調表示されている色と同じです日が選択されたときにそこには日が存在しないかのように一日、しかし、それが見えます。カレンダーが初期化されるか、テーブル内の個々のイベントはありませんを通じて探しfullCalendar changed Event CSS on Day Click

How it looks at the moment

How it should look when on a day with an event

日のような任意のデータ - 日付属性がある。

これは私がdayClickイベント日の背景色を変えています方法です:

dayClick: function (date, jsEvent, view) { 
    $(".fc-state-highlight").removeClass("fc-state-highlight"); 
    $(jsEvent.target).addClass("fc-state-highlight"); 

}, 
+0

あなたはいくつかのコードを共有することができますか? –

答えて

0

あなたはUTF-8その他の記号を使用することができます。ドットを追加する場所に⚫を追加できます。そしてそれをスタイルする。

dayClick: function (date, jsEvent, view) { 
     $(".fc-state-highlight").removeClass("fc-state-highlight"); 
     $(jsEvent.target).addClass("fc-state-highlight"); 
     $(jsEvent.target).append("⚫"); 

    }, 

このような何か:

$('.day').on('click', function(){ 
 
     $('.day').addClass("selected"); 
 
     $('.selected').append('<span class="dot">&#9899;<span>'); 
 
    });
a { 
 
    color:#fff; 
 
    text-decoration: none; 
 
}  
 
.day { 
 
     position:relative; 
 
     background: #555; 
 
     border-radius: 50%; 
 
     width:30px; 
 
     height: 30px; 
 
     text-align: center; 
 
    } 
 
    .selected { background: red;} 
 
    .dot { 
 
     color:#fff; 
 
     font-size: 10px; 
 
     position: absolute; 
 
     top: 50%; 
 
     left: 41%; 
 
    }
<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
     integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
     crossorigin="anonymous"></script> 
 
    <a href="#"><div class="day"><p>1</p></div></a>