FullCalendar のカスタマイズ
カレンダーを作成するのに便利なjQueryのプラグイン「FullCalendar」を使用する際に行ったカスタマイズのメモ書きです。 FullCalendar DEMO before after 使用したのは、fullcalendarのver 1.5.3です。 ラベルの変更 monthNames: ['January','February','March','April','May','June','July','August','September','October','November','December'], monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], dayNames: ['Sunday','Monday','Tuesday','Wednes
[FullCalendar]たった２行の追加でFullCalendarをiPad対応にするスクリプト
$(document).ready(function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var calendar = $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, }); $('#calendar').addTouch(); });
![[FullCalendar]たった２行の追加でFullCalendarをiPad対応にするスクリプト](https://cdn-ak-scissors.b.st-hatena.com/image/square/2fed32629ef2775388b43cbcb0d11c06c2eaf189/height=288;version=1;width=512/https%3A%2F%2Fgunmagisgeek.com%2Fblog%2Fwp-content%2Fuploads%2F2012%2F12%2Ftouch.png)
FullCalendar で色を変えるには - エンジニアきまぐれTips
FullCalendar で、曜日やイベントの色を指定してみた。今回、FullCalendar 1.5.1 が前提。古いバージョンの場合、指定方法が異なる場合がある。 曜日の色を指定する 土曜日や日曜日などは色を変えたい。CSS を指定すればよい。 .fc-sun { color: red; } /* 日曜日 */ .fc-sat { color: blue; } /* 土曜日 */ イベントの色を指定する (その１) CSS でクラス名を指定して色を変更する。以下では、クラス名 fooEvent に対して、文字と背景の色を指定している。 fooEvent, fooEvent .fc-event-skin { color: black; background-color: yellow; border-color: yellow; } イベントの色を指定する (その２) FullCalen
[FullCalendar] イベント（予定）の修正と削除
なんだかんだで仕事が忙しいので…手抜き更新。 FullCalendarで登録した予定（下記画像を参照）を、修正・削除する方法が公式のDemoに無かった気がするのでTipsとして載せておきます。 var calendar = $('#calendar').fullCalendar({ eventDblClick:function(event, jsEvent){ var title = prompt('予定を入力してください:', event.title); if(title && title!=""){ event.title = title; calendar.fullCalendar('updateEvent', event); //イベント（予定）の修正 }else{ calendar.fullCalendar("removeEvents", event.id); //イベント（予定
![[FullCalendar] イベント（予定）の修正と削除](https://cdn-ak-scissors.b.st-hatena.com/image/square/8fb32adb4f7078603596dbf4f287a4698c1523da/height=288;version=1;width=512/https%3A%2F%2Fgunmagisgeek.com%2Fblog%2Fwp-content%2Fuploads%2F2012%2F09%2FWS000020.jpg)
jQuery Plugin fullCalendarについてのメモ
jQuery Plugin fullCalendarについてのメモ 同梱のサンプル、や他者のサイトを参考に使い方のメモを創りました。 ■ダウンロード先 http://arshaw.com/fullcalendar/ Ver 1.6 ■基本的な使い方 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ １．表示したい領域に、divタグを定義して、IDに「calendar」と定義する。 【例】 ２．モジュールの定義 ※fullcalendar.min.jsもしくは、fullcalendar.jsを使用する ３．起動時実行スクリプトを編集 ※オプションは別途説明 【例】 $(document).ready(function() { $('#calendar').fullCalendar({ header: { left: 'prev,
fullCalendar.jsを使ったときのメモ(タイトルにHTMLタグを使う、ツールチップの表示)
fullCalendar.jsを使う機会がありました。 情報の表示方法としてのカレンダーというのは改めて考えると非常に有益な場合がある。という事を再認識しましたしこれを非常に簡単に実現できるこのライブラリに非常に感謝しました。 その中で何点か調べていかなければならない事があったのでメモ書きします。 fullcalender.jsの標準では、titleにHTMLタグを記述したとしてもエスケープして表示されてしまいます。 ただ、狭いカレンダー領域の中で効果的に情報を伝えるためにアイコンを利用するという必要があったので、titleにHTMLタグが通る必要がありました。 解決方法$('#calendar').fullCalendar({ events: [ { title: 'html string1', start: '2012-01-01' } ], eventRender: function
jQuery fullcalendar integration with PHP and MySQL
This plugin is to create a comprehensive interactive calendar that looks like "Google Calendar". And to perform basic operations on events (display, add, edit) dynamically through AJAX requests, it also allows to easily manipulate the various elements via "drag & drop". Step1 : Download the jQuery fullcalendar plugin by here You need to grab the required scripts and css. You can find what you need
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
