fullcalendar日历 周视图 左侧 不显示时间 显示姓名_「Drag & Drop」 - 日历视图你是这样用的吗?...

让日历视图如棋盘,经纬清晰;

让规划任务如落子,黑白分明。

1ce8b0e76909ef389cd83591e5f2f212.png

作为一款多平台应用,滴答清单的交互方式和使用技巧可以用「丰富」来形容。如果在日常使用中,能学习掌握一些小方法,往往可以显著提高你的工作效率。

今天给大家分享的是滴答清单日历视图的使用技巧,如题——Drag & Drop。

拖拽,意味着只需要简单的勾点、滑动,就能够完成一项操作。对任务管理者而言,日历视图如棋盘,经纬清晰;规划任务如落子,黑白分明。

a02e93e2222e372ac96c2dc9b82b30e7.gif

一.安排任务

如果你有很多尚未确定时间的任务需要安排,那么尝试在日历视图下完成这项工作吧。直面日历,可以最为直观的看到一周或者一月内所有已创建日期的任务,帮助你更好地统揽全局、合理规划。

在日历视图中,点击右上角的「...」选择「安排任务」,会向你展示所有未被分配时间的任务,你也可以主动选择展示部分文件夹或清单里的任务。拖拽任务到网格或时间轴中就可以设置日期和提醒。

周视图时间更为紧凑,视图左侧显示有时间轴,可以拖动任务至精确的时间点;月视图更为宏观,适合安排任务至某一天。

812ff5679e6e50b4b077ad87cdf98739.gif

二.更改任务日期

不同于真正的棋局的是,滴答清单日历视图并非「落子生根」,你可以轻松拖拽视图中的任务来更改任务日期。

3698084248a26681458689cd07255613.gif

三.创建时间段任务

如果你需要建立一个跨天任务,而又觉得在任务详情页设置时间段操作路径长、步骤多,那么直接在日历视图中创建是一个更好的选择。在月视图或周视图全天任务区域中,用鼠标拖动选中多个网格可以轻松创建跨天任务。

与以上操作类似,在周视图的时间轴区域,你可以通过拖动鼠标创建时间段任务。

(目前只有桌面端支持通过拖动创建时间段任务)

e72d389bfa615d062c0cee4cdb49d64a.gif

除了以上的小技巧,日历视图还有更多有趣有用的小功能,比如网页端的「Mini日历」、Windows和Mac客户端的日历小部件等。

只要去尝试,滴答清单总会给你惊喜。

让时间变得自由,然管理变得简单。关注公众号「滴答清单君」,了解更多时间管理技能。

下载 滴答清单,开启高效生活之旅。

在Vue 2中,使用FullCalendar库创建时间网格视图(timeGridWeek)并支持跨天显示时间段,你需要做以下几个步骤: 1. **安装依赖**: 首先,在项目中安装fullcalendar-vue库: ``` npm install @fullcalendar/vue --save ``` 2. **引入组件**: 在你的Vue组件文件中导入FullCalendar组件和相关的样式: ```html <script src="node_modules/@fullcalendar/core/main.js"></script> <link rel="stylesheet" href="node_modules/@fullcalendar/daygrid/main.css" /> <link rel="stylesheet" href="node_modules/@fullcalendar/timegrid/main.css" /> <script src="node_modules/@fullcalendar/vue/main.js"></script> ``` 3. **配置options**: 在`<template>`中添加 FullCalendar 的元素,并在`<script>`里设置事件模型、主题和其他选项,比如跨天显示: ```html <full-calendar :events="events" :options="calendarOptions" /> ``` ```javascript export default { data() { return { events: [], // 从API获取或本地存储的数据 calendarOptions: { plugins: ['dayGrid', 'timeGrid'], views: { week: { // 时间网格视图 dayCount: 7, // 显示完整的7天 eventOverlap: false, // 默认不允许事件重叠 allDaySlot: false, // 关闭全日整天格子 slotDuration: { days: 1 }, // 设置每个时段是一整天 header: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek' } } }, }; }, }, // ...其他生命期函数和方法 } ``` 4. **处理数据**: 确保`events`数组中的每个事件都有开始时间和结束时间,格式如ISO 8601 (`YYYY-MM-DDTHH:mm:ss`),以便FullCalendar正确渲染跨天事件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值