vue.jsとTailWindCSSとday.jsで作るズルいカレンダー - Qiita
カレンダーを作る際にテーブルを作るのも何なのでグリッドレイアウトを使ったらコードもシンプルになりました。 import dayjs from 'dayjs' // 月末の日にち const endDate = dayjs().endOf('month').get('date') // 月初の曜日 const startWeekday = dayjs().startOf('month').get('day') // 配列を作ります。 const dates = computed(() => { let data = [] //月の初めの日までは何もなし for (let i = 0; i < startWeekday; i++) { data.push('') } //日付を追加します。 for (let h = 1; h <= endDate; h++) { data.push(h) }
Javascript, Vue.jsでスクラッチから自作カレンダーアプリケーション作成 | アールエフェクト
前回の文書通りに進めていくと下記のカレンダーをブラウザ上に描写することができるようになります。”前の月”、”次の月”ボタンを押すことで表示月とは異なる他の月のカレンダーを表示することができますがカレンダーの外枠だけでカレンダー上へのイベント表示やイベントの入力は行うことができません。 作成したカレンダー カレンダーの外枠では自作のカレンダーを作成したことにはなりません。カレンダーの外枠に加えて今回の記事ではカレンダーの必須機能である2つの機能を実装を行っていきます。 前回作成したコード 前回の記事で作成したCalendar.vueファイルの中身は下記の通りです。 <template> <h2>カレンダー{{ currentDate }}</h2> <button @click="prevMonth">前の月</button> <button @click="nextMonth">次の月</
本当にこれだけ？JavaScript+vue.jsでカレンダー作成 | アールエフェクト
ブラウザ上でカレンダーを使ってスケジュールを管理したい場合、ネット上に公開されているカレンダーライブラリを利用するかGoogle Calendarを利用するしか選択肢がないって決め付けていませんか？ 自作のカレンダー作成はJavaScriptの入門者の人にとってハードルが高いように思うかもしれませんが作り方のベースさえ理解することができれば実はそれほど難しいものではありません。本文書ではJavaScript+Vue.jsを利用してスクラッチから自作カレンダーを作成していきます。 自作のカレンダーの作成方法を理解することができればGoogleカレンダーやライブラリにはない自分だけのオリジナルの機能をもったカレンダーアプリケーションを作成することができます。 本文書ではカレンダーを作成する際にvue.jsを利用していますが、vue.jsは必須ではありません。本文書でカレンダー作成の基本がわかれ
JavaScript による日付・時刻・時間の計算・演算のまとめ - hoge256ブログ
JavaScript でいろいろな日付の計算関係をまとめてみました。前回の日付関係のまとめエントリの JavaScript版です。 日付の単位について 基本的なことですが、一応まとめておきます。 1秒は1000ミリ秒 1分は60秒 1時間は60分 よって 1時間=60分=3600秒=3600000ミリ秒 1日=24時間=1440分=86400秒=86400000ミリ秒 現在時刻の取得 まずは、最もよく使う処理です。 //今日の日時を表示 var date = new Date(); document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.get
JavaScriptで正しい日付かチェックする関数 - ノウハウブログ - カンタローCGI
日付バリッド関数 JavaScriptで一般的な日付チェックを行う関数です。 日付オブジェクトに変換して確認しているので、うるう年などの間違いも正しく指摘してくれます。また、標準的な関数のみの使用なのでブラウザ依存もありません。 // ------------------------------------------------------------------- // 日付チェック関数 // ------------------------------------------------------------------- function ValidDate(y,m,d) { dt=new Date(y,m-1,d); return(dt.getFullYear()==y && dt.getMonth()==m-1 && dt.getDate()==d); } <script s
意外と知られていないJavaScriptのnew Date()の使用方法
new Date()の使い方 指定した時刻を表す日付オブジェクトを生成する。何も指定されなかった場合は現在の（デバイスに）設定されている時刻を取得する。 日時を指定するときはYYYY/MM/DD HH:mm:ssまたはそれぞれをカンマで区切った形式で取得。 var d1 = new Date('2014/04/01 12:34:56'); console.log(d1); // => Tue Apr 01 2014 12:34:56 GMT+0900 var d2 = new Date(2014, 3, 1, 12, 34, 56); console.log(d2); // => Tue Apr 01 2014 12:34:56 GMT+0900 new Date()に年を入れる new Date("2013")でその年の1月1日GMT+9時間の日付を取得する var d2 = new D
【JavaScript】【jquery】セレクトボックスでのうるう年計算 - yuya4's note
簡単な入力フォームを作ってJavaScriptの勉強をしているのですが、 生年月日を入力する際にいい感じでうるう年も考慮してくれるものがなかったので いろいろなサイトやらを参考にしながら作りました。 フォームはこんな感じです。 date_select.html <html> <head> <title>日付選択</title> <meta charset="utf-8"> </head> <body> <form class="form"> <select id="year"> <option value="">--西暦--</option> </select> <select id="month"> <option value="">-月-</option> </select> <select id="day"> <option value="">-日-</option> </selec
【jQuery】年と月からうるう年も計算した日を出力する - ITの隊長のブログ
この方の参考にしました（というかまるパクリリスペクト） d.hatena.ne.jp jQueryしか使え無いわたしはjQueryに書きかえる $('#birthDayYear,#birthDayMonth').on({ change : function() { // 要素取得と初期化 var dateSelect = $('#birthDayDate'); dateSelect.empty(); var y = $('#birthDayYear').val(); var m = $('#birthDayMonth').val(); // 閏年判定 if (2 == m && (0 == y % 400 || (0 == y % 4 && 0 != y % 100))) { var last = 29; } else { var last = new Array(31, 28, 31,
Schedule Template in CSS and JavaScript | CodyHouse
Schedule Template A simple template that lets you display events on a timeline, as well as organize them in groups (week days, conference rooms etc…) We’ve come across this web component many times: when we check the schedule of a conference, or the timetable of the classes of our gym. From a web designer perspective, it is handy to have a simple, responsive template to use if you ever need to cre
Googleカレンダーのデザインをカスタマイズして埋め込む方法 | 東京上野のWeb制作会社LIG
こんにちは、デザイナーのサリーです。 LIGが運営するシェアオフィス「いいオフィス」では連日イベントが行われており、お客様からイベントに関するお問い合わせも多く頂くようになりました。 そこで、いいオフィスサイトにイベントカレンダーを表示しよう！ということに。 しかし、Googleカレンダーのデザインが、サイトのデザインに合わなかったんです(´･_･`) Googleカレンダーは2011年に新しいデザインになりましたが、埋め込むときは青い枠のついた旧デザインしか選べません。あまり時間もかけられないし、難しいことはせずCSSだけ上書きしたい……。 何かいい方法はないかググってみたところ、「gcalendar-wrapper.php」というスクリプトを見つけたので使ってみたら、まさに求めていた挙動を実現できました！ 今回は、gcalendar-wrapper.phpの使い方についてご紹介します。
【pickadate.js】シンプルだけど高機能な日付カレンダー編 | DevelopersIO
pickadate.jsというライブラリーの中で、高機能な日付カレンダーを紹介してもらったので試してみました。 アジェンダ ソースのダウンロード 実装してみる。 日本語表記にする いろいろなオプション まとめ ソースのダウンロード まずはこちらのサイトからソースをダウンロードしてきます。ファイルを展開するといろいろファイルはありますが実際に使うファイルは[lib]フォルダ内にあります。 [lib]フォルダ内は以下のファイルになります、今回は日付カレンダー用のjs、cssを使用してみます。 実装してみる それでは実際に表示してみようと思います。今回のデモで使用したファイルになります。 css default.css default.date.css javascript jquery picker.date.js legacy.js app.js←こちらが実際に実行するファイルです。 ind
フリーで利用できるWEBカレンダーデザイン集を「30+ Inspiring Free Calendar and Date Picker PSD Designs」
TOP > WebDesign > フリーで利用できるWEBカレンダーデザイン集を「30+ Inspiring Free Calendar and Date Picker PSD Designs」 WEB上でもよく見かけるインターフェイスの一つカレンダー。日付ベースでデータを整理したり、直感的に時間を理解したりするのに便利なものですが、今回紹介するのは、フリーで利用できるWEBカレンダーデザイン集を「30+ Inspiring Free Calendar and Date Picker PSD Designs」です。 Calendar Freebie シンプルなものを中心に、様々なカレンダーデザインがまとめられています。いくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Calendar Tooltip シンプルなデザインのツールチップ型のカレンダー。 C
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FullCalendar-Vueでカレンダーにイベントを追加する方法がややこしかった話 - Qiita
IDEA * IDEA