web-dev-qa-db-ja.com

FullCalendarで開始時間を非表示にする

FullCalendarでは、月ビューで、イベントの開始時間を非表示にする方法はありますか？

jqueryfullcalendar
35
Theo

カレンダーオプションに追加するだけ

displayEventTime: false
52
andrey

次のスタイルをCSSに追加してください

.fc-event-time{
   display : none;
}

またはバージョン2+以降：

.fc-time{
   display : none;
}
31
Riz

これを試してください、それは私のために働きます：

$('#calendar').fullCalendar({
     displayEventTime : false
});

これにより、タイトルイベントの開始時間が非表示になります。

21
Raymond

以下は、月ビューでのみ日付を非表示にします。

.fc-view-month .fc-event-time{
    display : none;
}
11
Jayanti Gopaloodoo

それらをすべて非表示にするには、以下が機能するはずです

$('#calendar').fullCalendar({
 displayEventTime : false
});

しかし、あなた（私のような）が特定のイベントの時間を隠そうとしているなら、私はかなりクリーンな方法を見つけました。

次のCSSクラスを作成し、イベントプロパティ "className"で参照するだけです。

.hideCalendarTime > div > span.fc-time{
    display:none;
}

イベントは次のようになります。

var newEvent = new Object();
newEvent.title = "Something";
newEvent.start = new Date();
newEvent.allDay = false;
newEvent.className = "hideCalendarTime";
9
Thiago A

別の方法は、eventRender関数を追加することです。このようにして、時間をレンダリングしないことを選択し、データをイベントに追加するなどの別のことを行うことができます。

eventRender: function(event, element) { 
    element.find('.fc-event-title').append("<br/>" + event.location); 
    element.find('.fc-event-time').hide();
}
7
Catfish

cSSクラス名が

.fc-time {
    display:none;
}
5
AJ Hsu

開始時間を完全に削除したい場合は、以下のコードを使用できます

$('#calendar-canvas').fullCalendar({
    header: {
        left: 'today prev,next title',
        right: 'agendaDay,agendaWeek,month'
    },
    firstDay: 1,
    eventRender: function(event, element) {
        $(element).find(".fc-event-time").remove();
    }
});
3
Gouli Mahesh

http://fullcalendar.io/docs/text/timeFormat/ によると、fullCalendar設定で時刻形式を設定するだけです。

$('#calendar').fullCalendar({
    events: [              
    ],
    timeFormat: ' '
});
2
Artem Pogorelov

質問してから3か月が経ちました。しかし、あなたと私が他の誰かが同じことをしようとしているなら、答えを探しているかもしれません。

Fullcalendar.jsファイルのコメント行1603：

htmlEscape(formatDates(event.start, event.end, view.option('timeFormat'), options)) +

これは修正ではなく、よくてもハックですが、機能します。

2
Bill
.fc-time-grid-event.fc-short .fc-time,.fc-time-grid-event .fc-time{
        display: none !important;
    }

上記のコードは、すべてのビューでそれを修正します。

以下のコードには、イベントの大きなビューで時間を示すフローがあります

 .fc-time-grid-event.fc-short .fc-time{
            display: none !important;
        }

イベントからのみ時間を非表示にするには、CSSでこのコードを使用してください。

ちょうどを使用して

.fc-time{
        display: none !important;
    }

左側のグリッドでも時間を非表示にします。

0
Ravi S. Singh

削除するだけallDay: false, fullCalendar関数から

0
Elyor

@Rizは投稿時点では正しかったが、CSSは最近のバージョンで変更されており、次のものが必要になる。

.fc-day-grid-event .fc-time{
    display:none;
}
0
Chris Traverse