Fullcalendarの過去のイベントの色を変更します

Question

Fullcalendarの過去のイベントを「灰色化」するためにthis solutionを実装しようとしていますが、運が上手ではありません。私はJavascriptにあまり精通していませんが、私はいくつかの間違いを犯していると思います。

私はライン4587.

周りdaySegHTML（SEGS）の呼び出しの内部で、fullcalendar.jsに提案されたコードを入れてきた私は（なぜ関数の初期のvarリストの末尾に最初の2行を追加、私はこのような何か-SO）考え出していない：このコードの結果を実行する

for (i=0; i<segCnt; i++) { 
    seg = segs[i]; 
    event = seg.event; 
    classes = ['fc-event', 'fc-event-skin', 'fc-event-hori']; 
    if (isEventDraggable(event)) { 
     classes.push('fc-event-draggable'); 
    } 

    unixevent = parseInt((event.end.getTime())/1000); //event date in Unix 
    if (unixevent < hoy) {classes.push('fc-past');} //add class if event is old 

    if (rtl) { 
     if (seg.isStart) { 
      classes.push('fc-corner-right'); 
     } 
... 

：

... 
var leftCol; 
var rightCol; 
var left; 
var right; 
var skinCss; 

var hoy = new Date;// get today's date 
hoy = parseInt((hoy.getTime())/1000); //get today date in unix 

var html = ''; 
... 

その後、すぐ下に、私は、ループ内の他の2行を追加しましたイベントが表示されず、エラーメッセージが表示されるレンダリングされたカレンダー：Uncaught TypeError：nullのメソッド 'getTime'を呼び出すことができません。

"null"は、明らかにevent.end.getTime（）です。しかし、私は正確に何が悪くなっているのか、どのように物事が実行されているのか分かりません。書かれているように、それはうまくいくようです。このコードでは、event.endには有効なIETFタイムコードが含まれていますが、何らかの理由でgetTime（）を通じて実行しようとすると "そこにはありません"ということがわかります。

これは私のミッションクリティカルな微調整ではありませんが、それでもいいですし、何が起こっているのか、私が間違っていることを理解したいと思います！どのような助けが大いに感謝！

Answer 1

fullcalendar.jsを使用する必要はありません。

eventRender: function(calev, elt, view) { 
     if (calev.end.getTime() < sometime()) 
     elt.addClass("greyclass"); 
    }, 

などのコールバックを追加するだけで、.greyclassに正しいCSSを定義するだけで済みます。

Answer 2

OK]をので、ここでそれは（一種の）働いて、私が今持っているものです：私のスタイルシートで

eventRender: function(calev, elt, view) { 
     var ntoday = new Date(); 
     if (calev.start.getTime() < ntoday.getTime()){ 
      elt.addClass("past"); 
      elt.children().addClass("past"); 
     } 
} 

、私は色を変更するには、外側と内側の要素のスタイルを変更するために必要ない。したがって、elt.children().addclassが追加されました。

私が仕事に就くことができる唯一の時間のチェックは、終日のイベントの終了時間がないため、開始時間を見ることでしたが、これは明らかに複数日のイベントで問題を引き起こすでしょう。

解決策はありますか？

Answer 3

すべてのイベントにはIDが関連付けられています。 idsに基づいてすべてのイベントについて独自のメタ情報を保持することをお勧めします。イベントをバックエンドデータベースからポップアップさせる場合は、テーブルにフィールドを追加します。私のために最も効果的なのは、イベントIDを取得し、自分のデータストアからフェッチされた属性を設定/リセットするためだけにコールバックに依存することです。いくつかの視点を与えるために、私は自分のコードスニペットのセクションの下にペーストしています。重要な点は、あなたのニーズに合わせてEventDAOクラスをターゲットにすることです。次のように

public class EventDAO 
{ 
    //change the connection string as per your database connection. 
    //private static string connectionString = "Data Source=ASHIT\\SQLEXPRESS;Initial Catalog=amit;Integrated Security=True"; 

    //this method retrieves all events within range start-end 
    public static List<CalendarEvent> getEvents(DateTime start, DateTime end, long nParlorID) 
    { 
     List<CalendarEvent> events = new List<CalendarEvent>(); 

     // your data access class instance 
     clsAppointments objAppts = new clsAppointments(); 

     DataTable dt = objAppts.SelectAll(start, end); 

     for(int i=0; i<dt.Rows.Count; ++i) 
     { 
      CalendarEvent cevent = new CalendarEvent(); 
      cevent.id = (int)Convert.ToInt64(dt.Rows[i]["ID"]); 

       .....    

      Int32 apptDuration = objAppts.GetDuration(); // minutes 
      string staffName = objAppts.GetStaffName(); 
      string eventDesc = objAppts.GetServiceName(); 
      cevent.title = eventDesc + ":" + staffName; 

      cevent.description = "Staff name: " + staffName + ", Description: " + eventDesc; 

      cevent.start = (DateTime)dt.Rows[i]["AppointmentDate"]; 


      cevent.end = (DateTime) cevent.start.AddMinutes(apptDuration); 

      // set appropriate classNames based on whatever parameters you have. 
      if (cevent.start < DateTime.Now) 
      { 
       cevent.className = "pastEventsClass"; 
      } 
      ..... 

      events.Add(cevent); 
     } 
    } 
} 

高レベルの手順は以下のとおりです。

1. は、あなたのceventクラスにプロパティを追加します。それをclassNameまたはあなたが望むものと呼んでください。
2. すべてのイベントを取得中にEventDAOクラスに記入してください。メタ情報を取得するには、データベースまたは他のローカルストアを使用してください。
3. jsonresponse.ashxにclassNameを取得し、返されたイベントに追加します。

例jsonresponse.ashxからの抜粋：

オリジナルの答え@Jeffから適応

return "{" + 
    "id: '" + cevent.id + "'," + 
    "title: '" + HttpContext.Current.Server.HtmlEncode(cevent.title) + "'," + 
    "start: " + ConvertToTimestamp(cevent.start).ToString() + "," + 
    "end: " + ConvertToTimestamp(cevent.end).ToString() + "," + 
    "allDay:" + allDay + "," + 
    "className: '" + cevent.className + "'," + 
    "description: '" + 
    HttpContext.Current.Server.HtmlEncode(cevent.description) + "'" + "},"; 

Answer 4

それはそれがそうでなければ、開始日を使用し使用しない場合は、単に、終了日が存在するかどうかを確認します。 allDayキー（true/false）がありますが、allDay以外のイベントは終了日なしで作成することができるため、nullエラーが発生します。以下のコードは私のために働いています。 CSSの

.fc-past{background-color:red;} 

スタイル、将来の事象：

.fc-future{background-color:red;} 

Answer 5

カレンダー、あなたは下のコードのバージョンを使用する必要があります。これはMoment.jsを使っていくつかの変換を行いますが、FC2にはそれが必要なので、すでにそれを使用しています。

Answer 6

は、GoogleでFullCalendar2を使用している場合は、CSSでの過去のイベントFullCalendarのv1.6.4あたり

スタイルとして

eventRender: function(calev, elt, view) { 
      var ntoday = new Date().getTime(); 
      if (!calev.end){ 
       if (calev.start.getTime() < ntoday){ 
        elt.addClass("past"); 
        elt.children().addClass("past"); 
       } 
      } else { 
       if (calev.end.getTime() < ntoday){ 
        elt.addClass("past"); 
        elt.children().addClass("past"); 
       } 
      } 
     } 

Answer 7

@MaxDからの適応以下のコードは、過去のイベントを灰色にするために使用したコードです。私のJSONでJSONで

events: '/json-feed.php', 
eventRender: function(event,element,view) { 
     if (event.end < new Date().getTime()) 
      element.addClass("past-event"); 
    }, 
other options .... 

'event.end' を引いfullcalendarため

JSは完全な日付の時間 '2017年10月10日10時00分00秒'

CSSです

.past-event.fc-event, .past-event .fc-event-dot { 
    background: #a7a7a7; 
    border-color: #848484 
}