カレンダーの作成
なんとなくjQuery＋FullCalendarを利用してカレンダーを作ってみたわけですが、JavaScriptのところに出すほどでもないし、Webのほうでもないような気がして、戯言においておくことにします。 マンションの広報を電子化しようとすると、カレンダーが必要になるケースがあると思い、ちょっと試作してみたというもので、住んでいるマンションのごみ収集カレンダーにしてみました。凝ったものにする必要はないから、かなり手抜き作成をしちゃっています。まずできあがったサンプルは以下のような感じです。画面の横幅が足りない場合はブラウザを最大化してご覧になってください。 実装方法 まずFullCalendarにアクセスしてPluginをDownloadしてきます。解凍しておきましょう。head要素内でjQueryとfullcalendar.min.jsを読み込ませます。ファイルのpathはscrip
jQuery－FullCalendarでスケジュール表示カレンダー | サラリーマンのすらすらＩＴ日記
先日「jQuery－webでスケジュール表示カレンダー」という記事を書きました。やってみたいことができたので、少し紹介します。 このFullCalendarは、JSON形式データを渡すと表示されます。JSON形式データはファイルでもいいし、PHPなどのサーバサイドプログラムでJSON形式として出力したものでも表示できます。 $('#calendar').fullCalendar({ // ここで他のオプションを設定 // events: "http://192.168.1.1/hogehoge.php?from=2010-01-01&to=2010-01-31" }); サーバ192.168.1.1にあるhogehoge.phpは、指定した期間のデータを取ってきて（ここでは2010年1月1日から2010年1月31日まで）、クライアントに渡すというもので、これでFullCalendarに表示
fullCalendar.jsを使ったときのメモ(タイトルにHTMLタグを使う、ツールチップの表示)
fullCalendar.jsを使う機会がありました。 情報の表示方法としてのカレンダーというのは改めて考えると非常に有益な場合がある。という事を再認識しましたしこれを非常に簡単に実現できるこのライブラリに非常に感謝しました。 その中で何点か調べていかなければならない事があったのでメモ書きします。 fullcalender.jsの標準では、titleにHTMLタグを記述したとしてもエスケープして表示されてしまいます。 ただ、狭いカレンダー領域の中で効果的に情報を伝えるためにアイコンを利用するという必要があったので、titleにHTMLタグが通る必要がありました。 解決方法$('#calendar').fullCalendar({ events: [ { title: 'html string1', start: '2012-01-01' } ], eventRender: function
FullCalendar と PHP との連携 - エンジニアきまぐれTips
FullCalendar とは、JavaScript で書かれたカレンダーライブラリ。 jQuery のプラグインとして利用する。 http://arshaw.com/fullcalendar/ FullCalendar を描画する際に、PHP からイベントデータを取得してみる。FullCalendar 側は、データの取得元の URL を events に記述するだけ。今回は、付属のサンプルと同じ json-events.php とした。 index.html: <html> <head> <link rel='stylesheet' type='text/css' href='fullcalendar.css' /> <script type='text/javascript' src='jquery.js'></script> <script type='text/javascript
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
