相关文章推荐
爱运动的灌汤包  ·  Azure Functions ...·  1 年前    · 
满身肌肉的梨子  ·  Objective-C ...·  1 年前    · 

var currentLangCode = 'zh-cn';

// build the language selector's options

$.each($.fullCalendar.langs, function(langCode) {

$('#lang-selector').append(

$('')

.attr('value', langCode)

.prop('selected', langCode == currentLangCode)

.text(langCode)

// rerender the calendar when the selected option changes

$('#lang-selector').on('change', function() {

if (this.value) {

currentLangCode = this.value;

$('#calendar').fullCalendar('destroy');

renderCalendar();

$('#calendar').fullCalendar({

header: {

left: 'prev,next today',

center: 'title',

right: 'month,agendaWeek,agendaDay'

//点击day触发改变日期

dayClick: function(date, allDay, jsEvent, view){

var dates =date.format();

$.ajax({

url:"${ctx}/current/dateInfo/updateisworkday?date="+dates,

async:false

$('#calendar').fullCalendar('refetchEvents');

$("#message").empty();

$("#message").append('

class="alert alert-success hide">

class="close">×

lang: currentLangCode,

/* defaultDate: '2015-12-12', */

editable: true,

eventLimit: true, // allow "more" link when too many events

events: {

//查询数据库的日期

url: '${ctx}/current/dateInfo/queryByDate',

error: function() {

$('#script-warning').show();

loading: function(bool) {

$('#loading').toggle(bool);

body {margin: 40px 10px;padding: 0;font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;font-size: 14px;}

#top{width=1500px;height=800px;}

#intruduce{width:200px;height:200px;}

#int1{width:100px;height:60px;background-color: #FF9F89;}

#int2{width:100px;height:60px;background-color: #FFF68F;}

#calendar {max-width: 900px;margin: 0 auto;}

* 查询日期数据并设置数据的样式

* @param  start

* @param  end

* @param  request

* @param  response

* @param  model

* @return

@RequiresPermissions("current:dateInfo:view")

@RequestMapping(value = {"queryByDate"})

public String queryByDate(Date start,Date end, HttpServletRequest request, HttpServletResponse response, Model model) {

List dateInfos = dateInfoService.queryByDate( start, end);

List list = new ArrayList();

for(DateInfo dateInfo: dateInfos){

HashMap map =  new HashMap();

map.put("title", DictUtils.getDictLabel(dateInfo.getIsWorkday(), "is_workday", ""));//设置工作日和非工作日的颜色

map.put("color", !"0".equals(dateInfo.getIsWorkday())?"#FF9F89":"#FFF68F");

map.put("rendering", "background");

map.put("start", DateUtils.formatDate(dateInfo.getDate(), "yyyy-MM-dd"));

list.add(map);

return renderString(response,list);

修改日期的状态(工作日点击可改为非工作日):

* 修改工作日状态

* @param dateInfo

* @param request

* @param response

* @param model

* @param redirectAttributes

* @return

@RequiresPermissions("current:dateInfo:view")

@RequestMapping(value = {"updateisworkday"})

public

String findByDate(DateInfo dateInfo, HttpServletRequest request,

HttpServletResponse response, Model model,RedirectAttributes

redirectAttributes) {

if (!beanValidator(model, dateInfo)){

return form(dateInfo, model);

DateInfo entity = dateInfoService.findByDate(dateInfo);

entity.setIsWorkday(CurrentProjectConstant.IS_WORKDAY_NO.equals(entity.getIsWorkday())?CurrentProjectConstant.IS_WORKDAY_YES:CurrentProjectConstant.IS_WORKDAY_NO);

dateInfoService.update(entity);

addMessage(redirectAttributes, "工作日状态修改成功");

return "modules/current/dateInfo";

另外附上初始化日期的代码:

* 初始化日期信息

* @throws Exception

@Test

public void TestInitDateInfo() throws Exception {

//  SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd");

Calendar c = Calendar.getInstance();

//设置时间

c.setTime(DateUtils.parseDate("2015-12-01"));

//范围三年(可调整)

for(int i = 0;i

System.out.println();

//数据库表在项目中的实体

DateInfo dateInfo = new DateInfo();

int dayOfWeek = c.get(Calendar.DAY_OF_WEEK);

String isWorkDay = (dayOfWeek==7 || dayOfWeek==1)?CurrentProjectConstant.IS_WORKDAY_NO:CurrentProjectConstant.IS_WORKDAY_YES;

dateInfo.setIsWorkday(isWorkDay);

dateInfo.setDate(c.getTime());

dateInfoService.save(dateInfo);

//日期增加一天

c.add(Calendar.DAY_OF_MONTH, 1);

在此之前你应该引入fullCalendar的插件:实现的效果图可查看:点击日期可改变日期的状态(工作日和非工作日的切换) 首先是jsp页面:日期信息管理$(document).ready(function(){//日历显示字体varcurrentLangCode='zh-cn';//buildthelanguageselector'soptions$.each($.fullCal...
使用的full calendar 版本是2.7.0, 用到的插件有jquery-ui、bootstrap、jquery、moment.js、WdatePicker.js 页面代码如下:第一个div用来初始化日历,第二个div为bootstrap模态框,用来新增、修改、查看日程。 </head> <div id=' calendar '></div> <div class="modal fade" id="myModal" tabindex=
npm install vue-full calendar @latest --save 二、main.js文件中写入 import full Calendar from 'vue-full calendar ' Vue.component('full- calendar ', full Calendar ) 三、页面引用 <full- calendar :events="fcEvents" lang="zh" @chan
Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、 数据库 脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、 管理 便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:html、javascript、Vue 后台框架:SpringBoot 开发环境:idea 数据库 MySql (建议用 5.7 版本,8.0 有时候会有坑) 数据库 工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 后台路径地址:localhost:8080/项目名称/admin/dist/index.html 前台路径地址:localhost:8080/项目名称/front/index.html (无前台不需要输入)
在使用PHP和 MySQL 以及Full Calendar 插件实现日历拖动与数据保存时,首先需要确保已经正确安装了PHP和 MySQL ,并成功引入了Full Calendar 插件。 为了让日历具备拖动功能,需要在Full Calendar 的配置中设置"editable"属性为true。例如: $('# calendar ').full Calendar ({ editable: true, // 其他配置项 接着,在服务器端通过PHP来处理日历事件的拖动操作。当拖动日历事件后,Full Calendar 会向服务器发送一个包含被拖动事件新的日期和时间的POST请求,我们需要在PHP中接收并处理这个请求。 首先,我们创建一个PHP脚本来处理这个请求。例如,我们假设这个脚本叫做"update_event.php": ```php if ($_SERVER['REQUEST_METHOD'] == 'POST') { $event_id = $_POST['event_id']; $new_start_date = $_POST['new_start_date']; $new_end_date = $_POST['new_end_date']; // 在这里更新 数据库 中对应的事件的起止日期 // ... echo json_encode(['status' => 'success']); } else { echo json_encode(['status' => 'error']); 然后,在Full Calendar 的配置中,我们需要设置一个事件回调函数来处理事件的更新。例如: ```javascript $('# calendar ').full Calendar ({ // 其他配置项 eventDrop: function(event, delta, revertFunc) { $.ajax({ url: 'update_event.php', type: 'POST', data: { event_id: event.id, new_start_date: event.start.format(), new_end_date: event.end.format() success: function(response) { console.log('Event updated successfully.'); error: function() { revertFunc(); // 如果更新失败,则恢复事件的原始位置 console.log('Error updating event.'); 这样,当用户拖动日历中的事件时,Full Calendar 会自动发送一个AJAX请求到"update_event.php"脚本,该脚本会接收并处理这个请求,然后更新 数据库 中对应事件的起止日期。 以上就是使用PHP、 MySQL 和Full Calendar 实现日历拖动与数据保存的基本步骤。根据具体需求,你可能还需要在 数据库 中创建对应的表格来存储日历事件,并在PHP脚本中实现事件的查询、插入和删除等功能。