7

Fullcalendar で過去のイベントを「グレーアウト」するためにこのソリューションを実装しようとしていますが、うまくいきません。ただし、私は Javascript にあまり精通していないので、愚かな間違いを犯していると思います。

提案されたコードを fullcalendar.js の 4587 行付近の daySegHTML(segs) の呼び出し内に入れています。

関数の最初の var リストの末尾に最初の 2 行を追加しました (なぜなら、そうではないと私は考えました)。つまり、次のようになります。

...
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 行を追加しました。

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');
        }
...

このコードを実行すると、カレンダーが表示され、イベントが表示されず、次のエラー メッセージが表示されます: Uncaught TypeError: Cannot call method 'getTime' of null

参照されている「null」は、どうやら event.end.getTime() です。しかし、何がうまくいかないのか、または物事がどのように実行されているのかを正確に理解しているかどうかはわかりません。書かれているとおり、それはうまくいくようです。コードのこの時点で、event.end には有効な IETF タイムコードが含まれていることがわかりますが、getTime() で実行しようとすると、何らかの理由で「存在しません」?

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

4

8 に答える 8

7

Google カレンダーで FullCalendar2 を使用している場合は、以下のバージョンのコードを使用する必要があります。これは Moment.js を使用して一部の変換を行いますが、FC2 では Moment.js が必要なため、既に使用しています。

        eventRender: function(event, element, view) {                   
            var ntoday = new Date().getTime();
            var eventEnd = moment( event.end ).valueOf();
            var eventStart = moment( event.start ).valueOf();
            if (!event.end){
                if (eventStart < ntoday){
                    element.addClass("past-event");
                    element.children().addClass("past-event");
                }
            } else {
                if (eventEnd < ntoday){
                    element.addClass("past-event");
                    element.children().addClass("past-event");
                }
            }
        }
于 2014-06-08T21:37:26.543 に答える
3

FullCalendar v1.6.4 による

css で過去のイベントのスタイルを設定します。

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

css で将来のイベントのスタイルを設定します。

.fc-future{background-color:red;}
于 2014-02-08T06:57:32.280 に答える
2

fullcalendar.js をいじる必要はありません。次のようなコールバックを追加するだけです。

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

.greyclass に正しい CSS を定義するだけです。

于 2012-09-28T04:48:17.827 に答える
1

すべてのイベントには ID が関連付けられています。ID に基づいて、すべてのイベントに関する独自のメタ情報を維持することをお勧めします。バックエンド データベースからイベントを取得する場合は、テーブルにフィールドを追加します。私にとって最も効果的だったのは、イベント 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:

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) + "'" +  "},";
于 2012-10-02T03:21:35.640 に答える
0

さて、これが私が今持っているものです、それは（一種の）機能しています：

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追加。

終日のイベントの終了時刻がなく、仕事に取り掛かることができた唯一の時間チェックは、開始時刻を確認することでしたが、これは明らかに、複数日のイベントで問題を引き起こすことになります。

別の可能な解決策はありますか？

于 2012-09-29T17:17:32.847 に答える