fullcaledar日历插件

最新推荐文章于 2023-11-17 16:48:44 发布
最新推荐文章于 2023-11-17 16:48:44 发布
阅读量392 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/z-e-r-o/p/6668381.html
版权

因公司想做个添加事件的日历,,找遍插件感觉fullcaledar最强大,,而且很多人推荐,故找到最易理解的解释做笔记

Github地址：https://github.com/fullcalendar/fullcalendar

官网地址：http://fullcalendar.io/

引入依赖的JS和CSS

由于 FullCalendar 自身是个 JQuery 插件，所以首先要引入 ：

<script src='jquery.min.js'></script>

然后是 FullCalendar 的依赖（可以在FullCalendar的官网下载）：

<link href='fullcalendar.css' rel='stylesheet' /> <script src='moment.min.js'></script> <script src='fullcalendar.min.js'></script>

FullCalendar还为我们提供了国际化的依赖（下载的FullCalendar目录中包含），目录下的lang文件夹也需要拷贝到和当前资源同一目录下：

<script src='lang-all.js'></script

最后是Bootstrap的依赖：

<link href='bootstrap.min.css' rel='stylesheet' /> <script src='bootstrap.min.js'></script>
构建index.html

新建 HTML File 引入相关文件：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href='fullcalendar.css' rel='stylesheet' /> <link href='bootstrap.min.css' rel='stylesheet' /> <style> /* 语言选择 */ #top { background: #eee; border-bottom: 1px solid #ddd; padding: 0 10px; line-height: 40px; font-size: 12px; } /* 日历 */ #calendar { margin: 40px auto; padding: 0 10px; } /* Event 参数 className 的值 */ .done:before { content:"【 已完成 】"; background-color:yellow; color:green; text-align:center; font-weight:bold; width:100%; } /* Event 参数 className 的值 */ .doing:before { content:"【 未完成 】"; background-color:yellow; color:red; text-align:center; font-weight:bold; } </style> </head> <body> <div id='top'> Language: <select id='lang-selector'></select> </div> <div id='calendar'></div> </body> <script src='jquery.min.js'></script> <script src='moment.min.js'></script> <script src='fullcalendar.min.js'></script> <script src='lang-all.js'></script> <script src='bootstrap.min.js'></script> </html>
初始化FullCalendar

JavaScript初始化：

<script type="text/javascript"> $(document).ready(function() { //国际化默认值为'en'，代表使用英文 var initialLangCode = 'en'; //初始化FullCalendar $('#calendar').fullCalendar({ //设置头部信息，如果不想显示，可以设置header为false header: { //日历头部左边：初始化切换按钮 left: 'prev,next today', //日历头部中间：显示当前日期信息 center: 'title', //日历头部右边：初始化视图 right: 'month,agendaWeek,agendaDay' }, //设置是否显示周六和周日，设为false则不显示 weekends: true, //日历初始化时显示的日期，月视图显示该月，周视图显示该周，日视图显示该天，和当前日期没有关系 defaultDate: '2016-06-06', //日程数据 events: [ { title: 'All Day Event', start: '2016-08-11' } ] }); //初始化语言选择的下拉菜单值 $.each($.fullCalendar.langs, function(langCode) { $('#lang-selector').append( $('<option/>') .attr('value', langCode) .prop('selected', langCode == initialLangCode) .text(langCode) ); }); //当选择一种语言时触发 $('#lang-selector').on('change', function() { if (this.value) { $('#calendar').fullCalendar('option', 'lang', this.value); } }); }); </script>
配置完成

我们可以看到配置完成后，FullCalendar的雏形也出来了。 
使用FullCalendar做一个自己的日程管理（一）- 基础篇

常用属性设置

FullCalendar中有一些很常用的属性，非常实用。

//月视图下日历格子宽度和高度的比例
aspectRatio: 1.35,
//月视图的显示模式，fixed：固定显示6周高；liquid：高度随周数变化；variable: 高度固定
weekMode: 'liquid',
//初始化时的默认视图，month、agendaWeek、agendaDay defaultView: 'month', //agenda视图下是否显示all-day allDaySlot: true, //agenda视图下all-day的显示文本 allDayText: '全天', //agenda视图下两个相邻时间之间的间隔 slotMinutes: 30, //区分工作时间 businessHours: true, //非all-day时，如果没有指定结束时间，默认执行120分钟 defaultEventMinutes: 120, //设置为true时，如果数据过多超过日历格子显示的高度时，多出去的数据不会将格子挤开，而是显示为 +...more ，点击后才会完整显示所有的数据 eventLimit: true,
日程数据的设置

我们可以设置日程数据的内容来得到丰富的显示效果。

{
id  //唯一标识，可以不填，持久化时编辑数据时使用
title   //显示在日历上的内容
allDay  //标识是否为全天，可以不填，调用event.allDay时会自动区分是否为全天
start   //开始的时间，格式为 yyyy-MM-dd 或 yyyy-MM-dd HH:mm
end //结束的时间，可以不填，格式为 yyyy-MM-dd 或 yyyy-MM-dd HH:mm url //可以不填，点击时跳转到指定url className //数据的样式，可以不填 color //背景和边框颜色，可以不填，默认为#3a87ad backgroundColor //背景颜色，可以不填，默认为#3a87ad borderColor //边框颜色，可以不填，默认为#3a87ad textColor //文本颜色,可以不填，默认为白色 }
实例

往events中添加一些静态数据，完整的效果如下。

events: [
            {
                id: 1,
                title: '这是一个all-day数据',
                allDay: true,
                start: '2016-08-11'
            },
            {
                id: 2,
                title: '开始时间为12PM', start: '2016-08-11 12:00' }, { id: 3, title: '给一点颜色', start: '2016-08-11', color: 'red' }, { id: 4, title: '使用className:done', start: '2016-08-10 09:00', end: '2016-08-11 18:00', color: 'blue', className: 'done' }, { id: 5, title: '使用className:doing', start: '2016-08-11 09:00', end: '2016-08-12 18:00', color: 'green', className: 'doing' }, { id: 6, title: '使用URL和字体颜色', start: '2016-08-11', color: 'pink', url: 'http://flovel.xyz', className: 'doing', textColor: 'black' }, { id: 7, title: '使用backgroundColor和borderColor', start: '2016-08-11 09:00', end: '2016-08-12 18:00', backgroundColor: 'gray', borderColor: 'red', className: 'done' }, ]

使用FullCalendar做一个自己的日程管理（一）- 基础篇

 

 

各种事件

1. 鼠标点击事件

（1）通过鼠标点击日历某一天触发dayClick的callback，参数date为点击的日期或时间，常用于为某一天或为某一时刻添加日程，具体方法如下（使用Console日志打印点击的日期或时间） ：

dayClick : function( date ) {
    //do something here...
    console.log('dayClick触发的时间为：', date.format());
    // ...
},

 

在month视图下点击时：

使用FullCalendar做一个自己的日程管理（二）- 事件篇

在agenda视图下点击时会带上对应的时间：

使用FullCalendar做一个自己的日程管理（二）- 事件篇

（2）通过鼠标点击日历某一Event数据触发eventClick的callback，参数event表示被点击的Event，常用于编辑某一Event数据，具体方法如下（使用Console日志打印点击的Event数据基本信息） ：

eventClick : function( event ){
    //do something here...
    console.log('eventClick中选中Event的id属性值为：', event.id); console.log('eventClick中选中Event的title属性值为：', event.title); console.log('eventClick中选中Event的start属性值为：', event.start.format('YYYY-MM-DD HH:mm')); console.log('eventClick中选中Event的end属性值为：', event.end.format('YYYY-MM-DD HH:mm')); console.log('eventClick中选中Event的color属性值为：', event.color); console.log('eventClick中选中Event的className属性值为：', event.className); // ... },

 

使用FullCalendar做一个自己的日程管理（二）- 事件篇

2. 鼠标悬浮事件

通过鼠标经过或者离开日历某一天触发callback，参数event表示鼠标经过或离开的Event，常用来通过一些悬浮DIV展示Event数据的基本信息，具体方法如下（使用Console日志打印事件的触发过程） ：

（1）鼠标经过

eventMouseover : function( event ) {
    //do something here...
    console.log('鼠标经过 ...');
    console.log('eventMouseover被执行，选中Event的title属性值为：', event.title);
    // ...
},

 

使用FullCalendar做一个自己的日程管理（二）- 事件篇

（2）鼠标离开

eventMouseout : function( event ) {
    //do something here...
    console.log('eventMouseout被执行，选中Event的title属性值为：', event.title);
    console.log('鼠标离开 ...');
    // ...
},

 

使用FullCalendar做一个自己的日程管理（二）- 事件篇

3. 鼠标选择事件

通过鼠标点击或者拖动选择日历中的对象会触发select的callback，参数start表示选择的开始时间，参数end表示选择的结束时间，常用于快速添加阶段性时间的日程，具体方法如下（使用Console日志打印选择的开始和结束时间） ：

相关的属性设置：

//设置是否可被单击或者拖动选择
selectable: true,
//点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用
selectHelper: true,
//点击或者拖动选中之后，点击日历外的空白区域是否取消选中状态 true为取消 false为不取消，只有重新选择时才会取消 unselectAuto: true,

下面是select的callback方法：

select: function( start, end ){
    //do something here...
    console.log('select触发的开始时间为：', start.format());
    console.log('select触发的结束时间为：', end.format());
    // ...
},

 

如果dayClick和select同时存在时，两个callback都会执行，需要注意。

使用FullCalendar做一个自己的日程管理（二）- 事件篇

在month视图下选择时：

使用FullCalendar做一个自己的日程管理（二）- 事件篇

设置了selectHelper为true，在agenda视图下选择时会带上对应的时间，Helper会显示选择的时间范围：

使用FullCalendar做一个自己的日程管理（二）- 事件篇

4. 鼠标拖动事件

通过鼠标按住拖动某一Event触发eventDrop的callback，参数event表示被拖动的Event，参数dayDelta表示这次拖动导致Event移动了多少天或时间, 向前为正数, 向后为负数，参数revertFunc 用来在提交数据失败时将刚才的拖动恢复到原状，拖动改变日程时间范围常用于快速编辑某一Event的日程时间，具体方法如下（使用Console日志打印鼠标拖动Event的过程） ：

相关的属性设置：

//Event是否可被拖动或者拖拽
editable: true,
//Event被拖动时的不透明度
dragOpacity: 0.5,

下面是eventDrop的callback方法，判断了month视图和agenda视图下不同的时间改变：

eventDrop : function( event, dayDelta, revertFunc ) {
    //do something here...
    console.log('eventDrop --- start ---');
    console.log('eventDrop被执行，Event的title属性值为：', event.title);
    if(dayDelta._days != 0){ console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._days+'天！'); }else if(dayDelta._milliseconds != 0){ console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！'); }else{ console.log('eventDrop被执行，Event的start和end时间没有改变！'); } //revertFunc(); console.log('eventDrop --- end ---'); // ... },

在month视图下开始拖动，改变的是天数：

开始拖动，可以看到不透明度发生了变化。

使用FullCalendar做一个自己的日程管理（二）- 事件篇

松开鼠标，完成拖动。

使用FullCalendar做一个自己的日程管理（二）- 事件篇

在agenda视图下开始拖动，改变的是毫秒数：

Event初始位置。

使用FullCalendar做一个自己的日程管理（二）- 事件篇

开始拖动，可以看到不透明度发生了变化。

使用FullCalendar做一个自己的日程管理（二）- 事件篇

松开鼠标，完成拖动。

使用FullCalendar做一个自己的日程管理（二）- 事件篇

5. 鼠标拖拽事件

通过鼠标按住Event的一侧进行拖拽触发eventResize的callback，参数event表示被拖拽的Event，参数dayDelta表示这次拖拽改变日程结束时间导致Event日程结束时间增加了多少天或时间,，参数revertFunc 用来在提交数据失败时将刚才的拖拽恢复到原状，拖拽改变日程结束时间常用于快速编辑某一Event的日程结束时间，具体方法如下（使用Console日志打印鼠标拖拽Event的过程） ：

相关的属性设置：

//Event是否可被拖动或者拖拽，之前拖动配置过了，此处不必配置
editable: true,

 

下面是eventResize的callback方法，判断了month视图和agenda视图下不同的时间改变：

eventResize : function( event, dayDelta, revertFunc ) {
    //do something here...
    console.log(' --- start --- eventResize');
    console.log('eventResize被执行，Event的title属性值为：', event.title);
    if(dayDelta._days != 0){ console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._days+'天！'); }else if(dayDelta._milliseconds != 0){ console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！'); }else{ console.log('eventResize被执行，Event的start和end时间没有改变！'); } //revertFunc(); console.log('--- end --- eventResize'); // ... },

注意：

（1）all-day的Event可以在month、agendaWeek视图下向右拖拽改变日程结束时间 
（2）非all-day的Event，不可以在month视图下拖拽，只能在agenda视图下向下拖拽改变日程结束时间

在month视图下开始拖拽，改变的是天数：

使用FullCalendar做一个自己的日程管理（二）- 事件篇

在agenda视图下开始拖动，改变的是毫秒数：

使用FullCalendar做一个自己的日程管理（二）- 事件篇

附录 完整代码
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href='fullcalendar.css' rel='stylesheet' /> <style> /* 语言选择 */ #top { background: #eee; border-bottom: 1px solid #ddd; padding: 0 10px; line-height: 40px; font-size: 12px; } /* 日历 */ #calendar { margin: 40px auto; padding: 0 10px; } /* Event 参数 className 的值 */ .done:before { content:"【 已完成 】"; background-color:yellow; color:green; text-align:center; font-weight:bold; width:100%; } /* Event 参数 className 的值 */ .doing:before { content:"【 未完成 】"; background-color:yellow; color:red; text-align:center; font-weight:bold; } </style> </head> <body> <div id='top'> Language: <select id='lang-selector'></select> </div> <div id='calendar'></div> </body> <script src='jquery.min.js'></script> <script src='moment.min.js'></script> <script src='fullcalendar.min.js'></script> <script src='lang-all.js'></script> <script type="text/javascript"> $(document).ready(function() { var initialLangCode = 'en'; $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, weekends: true, weekMode: 'liquid', defaultView: 'month', allDayText: '全天', businessHours: true, defaultEventMinutes: 120, eventLimit: true, dayClick : function( date ) { //do something here... console.log('dayClick触发的时间为：', date.format()); // ... }, //设置是否可被单击或者拖动选择 selectable: true, //点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用 selectHelper: true, //点击或者拖动选中之后，点击日历外的空白区域是否取消选中状态 true为取消 false为不取消，只有重新选择时才会取消 unselectAuto: true, select: function( start, end ){ //do something here... console.log('select触发的开始时间为：', start.format()); console.log('select触发的结束时间为：', end.format()); // ... }, eventClick : function( event ){ //do something here... console.log('eventClick中选中Event的id属性值为：', event.id); console.log('eventClick中选中Event的title属性值为：', event.title); console.log('eventClick中选中Event的start属性值为：', event.start.format('YYYY-MM-DD HH:mm')); console.log('eventClick中选中Event的end属性值为：', event.end.format('YYYY-MM-DD HH:mm')); console.log('eventClick中选中Event的color属性值为：', event.color); console.log('eventClick中选中Event的className属性值为：', event.className); // ... }, eventMouseover : function( event ) { //do something here... console.log('鼠标经过 ...'); console.log('eventMouseover被执行，选中Event的title属性值为：', event.title); // ... }, eventMouseout : function( event ) { //do something here... console.log('eventMouseout被执行，选中Event的title属性值为：', event.title); console.log('鼠标离开 ...'); // ... }, //Event是否可被拖动或者拖拽 editable: true, //Event被拖动时的不透明度 dragOpacity: 0.5, eventDrop : function( event, dayDelta, revertFunc ) { //do something here... console.log('eventDrop --- start ---'); console.log('eventDrop被执行，Event的title属性值为：', event.title); if(dayDelta._days != 0){ console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._days+'天！'); }

转载于:https://www.cnblogs.com/z-e-r-o/p/6668381.html

weixin_30483697
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
fullCalendar插件常用参数配置示例
weixin_33978016的博客
10-25 420
新建群asp.net相关技术讨论群205914059，快来人呀events 配置varData=[]; for(vari=0;i<jdata.length;i++){ vartitleStr=jdata[i]["sRoomName"]; Data.push({"id"...
改造之后的fullCalendar（改事件背景、标题自定义、无星期、左右按钮）
04-20
NULL 博文链接：https://lihong11.iteye.com/blog/1897471
FullCalendar 日历插件排班表排课表保姆级详解(可拖动排班排课)
m0_49017085的博客
04-07 7959
闲来无事搞个排班排课表，之前貌似遇到过这类的需求，只不过没做上。主要用的就是FullCalendar插件。基于vue框架写法。基本的功能可以新建个日程看看样式，可以拖拽日程进去。提示：以下是本篇文章正文内容，下面案例可供参考以上就是实现简易排班排课表的雏形啦，复杂的功能还是要基于数据啦，静态只是看看大概。先说这么多，后面有坑我再写；以及后面看看能不能再加上些好玩的功能。
Vue中使用Fullcalendar日历开发日程安排
小破孩的博客
12-31 1万+
效果图： 官方文档地址：https://fullcalendar.io/docs/vue 1、安装与FullCalendar相关的依赖项 npm install --save @fullcalendar/vue @fullcalendar/daygrid 2、在模板中添加标签 <full-calendar ref="fullCalendar" style="height: 100%" :options="calendarOptions"></full-calendar&g
Fullcalendar日历使用，包括视图选择、事件插入、编辑事件、事件状态更改、事件添加和删除、事件拖动调整，自定义头部，加入el-popover显示图片、图片预览、添加附件链接等，支持手机显示。
qq_24800941的博客
09-03 1万+
Fullcalendar日历使用，包括视图选择、事件插入、编辑事件、事件状态更改、事件添加和删除、事件拖动调整，自定义头部，加入el-popover显示图片、图片预览、添加附件链接等，支持手机显示。
【日历组件】前端使用fullcalendar组件实现会议室预约功能
柠檬加冰
04-23 1万+
框架描述 使用框架技术 使用fullcalendar，作为日历组件的基本框架 使用layer弹出框，作为填写会议室预约详情的组件 关键技术讲解 日历组件的点击事件 点击事件使用eventClick函数实现 函数中，能够通过event获取当前点击的日程详细信息 eventClick: function (event, jsEvent, view) { ...
jquery日历插件
05-05
日历插件 一款非常好用的插件................................................................................................................................................................................
日历插件.zip
08-15
jeDate6.5.0是一款原生JS开发的不依赖任何第三方库大众化的日期控件，她身兼多职，虽不是万能的，但是她却是功能强大多样的美少女，她除了包含 单双面板、区域选择、 多语言、日历固定、有效无效日期、日期时间戳...
jQuery 日历插件
04-26
基于jquery的日历插件
自定义日历插件
04-10
本人自定义的一个日历插件，仅供参考学习
日历插件日历插件日历插件
12-28
日历插件日历插件日历插件日历插件日历插件日历插件日历插件日历插件
vue下使用fullcalendar及简单案例
qq_41460077的博客
11-05 1万+
ps：我真的感觉自己是个前端了，最近天天在写前端。不过很多复杂逻辑，后台处理起来比较麻烦，所以只让后台提供简单数据，前端封装处理数据确实比较方便！ 引子：最近公司要做个人日程管理，故鄙人思前想后，选择了fullcalendar组件。但！官方文档全是英文，对于英语四级都没过的我，真是很心累。只能发扬面向百度编程的优良传统，找了好多案例做出来了。现总结如下： vue下使用fullcalendar及简单案例 使用版本：5.3.0 效果图 安装 在package.json中引入如下，运行“npm i” .
FullCalendar插件的基本使用
weixin_34315665的博客
10-31 939
先说一下我的另一博客地址: https://home.cnblogs.com/u/bllx/ FullCalendar的选择 前段时间，一直在开发考勤系统，当时为满足设计的需求，选了好几个插件，最后决定采用Fullcanlendar的插件。感觉这个插件可以满足现阶段的功能开发需求；因为设计图是日历块的展示以及每天的日历还有功能需求点，因此...
Fullcalender使用历程及总结
weixin_45432736的博客
09-08 877
1.设置日历表按钮文字，且风格对应中文 var calendar = new Calendar(calendarEl, { events: function (date, callback, falsecallback) {}, theme: true, isRTL: false, firstDay: 0, droppable: true, contentHeight: "5rem", heig
FullCalendar中文文档：API
热门推荐
小胡的博客
04-08 3万+
FullCalendar提供了丰富的属性设置和方法调用，开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发，本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档，以供参阅。当前版本1.6.4。 普通显示设置 属性 描述 默认值 header 设置日历头部信息。 如果设置为false，则不显示头部信息。包括left，cen...
FullCalendar日历插件说明文档
最新发布
SYQ15544423296的博客
11-17 1805
一般标准配置视图FullCalendar插件有5类视图：包括month（月视图），basicWeek（基本周视图，左侧不显示具体时间），basicDay（基本日视图，左侧不显示具体时间），agendaWeek（周视图），agendaDay（日视图）。
fullCalendar日程表在Vue项目中的应用
绝对零度的博客
05-06 4931
fullCalendar日程表在Vue项目中的应用 fullCalendar相关API 使用fullCalendar插件在项目中实现日程排版，支持天、月日程转换，自定义事件 页面布局 通过按钮切换天与月视图的转换，天视图回显具体的时分排版项目，月视图回显缩略信息 <div class="order-day-calendar h-100 clearfix"> <div id='calendar' class="h-100" @contextmenu.prevent.stop="st
《学习总结》fullcalendar插件
Leporc的博客
10-15 1491
fullcalendar使用，fullcalendar中增加事件点击弹窗
FullCalendar说明文档
yuan_jie
11-27 5218
FullCalendar提供了丰富的属性设置和方法调用，开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发，本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档，方便参阅。当前版本1.6.4。 普通显示设置 属性 描述 默认值 header 设置日历头部信息。 如果设置为false，则不显示
uniapp日历插件
09-07
您好！对于uniapp日历插件，有很多可供选择的插件。以下是几个比较受欢迎的uniapp日历插件： 1. vue-calendar：这是一个基于Vue.js的日历插件，可以很方便地在uniapp中使用。它支持自定义事件、日期选择、月份切换等功能。 2. uView UI：这是一个功能强大的UI组件库，其中包含了日历组件。uView UI的日历组件支持农历显示、日期选择、日期标记等功能。 3. uni-calendar：这是一个专为uniapp开发者设计的日历组件，支持农历显示、日期选择、日期标记等功能。它还提供了丰富的自定义配置选项，让您可以根据自己的需求进行定制。 以上仅是一些推荐的uniapp日历插件，您可以根据自己的需求和喜好进行选择和使用。希望对您有帮助！如果您有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值