デイリープランナー

<!-- Add Block Form -->
<div class="dp-card">
  <h3>タイムブロックを追加</h3>

  <div class="dp-field">
    <label>タイトル</label>
    <input type="text" id="dp-title" placeholder="例：チームミーティング" maxlength="60">
  </div>

  <div class="dp-field">
    <label>カテゴリ</label>
    <div class="dp-cat-chips" id="dp-cat-chips"></div>
    <select id="dp-cat-select">
      <option value="仕事">仕事</option>
      <option value="ミーティング">ミーティング</option>
      <option value="プライベート">プライベート</option>
      <option value="運動">運動</option>
      <option value="休憩">休憩</option>
      <option value="その他">その他</option>
    </select>
  </div>

  <div class="dp-time-row">
    <div class="dp-field">
      <label>開始</label>
      <input type="time" id="dp-start" value="09:00">
    </div>
    <div class="dp-field">
      <label>終了</label>
      <input type="time" id="dp-end" value="10:00">
    </div>
  </div>

  <div class="dp-field">
    <label>カラー</label>
    <div class="dp-color-row" id="dp-color-row"></div>
  </div>

  <button class="dp-btn dp-btn-primary" style="width:100%;margin-top:4px" onclick="dpAddBlock()">＋ 追加</button>
</div>

<!-- Summary -->
<div class="dp-card">
  <h3>カテゴリ別集計</h3>
  <ul class="dp-summary-list" id="dp-summary"></ul>
  <div class="dp-total-hrs" id="dp-total-hrs" style="display:none">
    合計予定時間: <span id="dp-total-val">0時間</span>
  </div>
</div>

スケジュール管理と一緒に、請求・経費もクラウドで

freee会計なら、請求書作成・経費精算・確定申告までまとめて管理。個人事業主・フリーランスにも最適。無料トライアル実施中。 freeeを無料で試す →

集中力を高める → ポモドーロタイマー 習慣を継続する → 習慣トラッカー タスクを整理する → カンバンボード

確定申告・会計をもっとラクに？ freee会計 なら、フリーランスの経費管理もクラウドで簡単。まずは無料で試してみましょう。

関連記事