fullcalendar实现拖拽方案到日历中--html

最新推荐文章于 2024-02-28 15:51:37 发布
最新推荐文章于 2024-02-28 15:51:37 发布
阅读量2k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41593364/article/details/89315398
版权

html代码.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <link href='${siteurl}/templates/default/media/js/fullcalendar-3.9.0/fullcalendar.min.css' rel='stylesheet'/>
    <link href='${siteurl}/templates/default/media/js/fullcalendar-3.9.0/fullcalendar.print.min.css' rel='stylesheet'
          media='print'/>
    <link rel="stylesheet" href="${siteurl}/templates/skin2/plugins/layui/css/layui.css" media="all">
    <script src='${siteurl}/templates/default/media/js/fullcalendar-3.9.0/lib/moment.min.js'></script>
    <script src='${siteurl}/templates/default/media/js/fullcalendar-3.9.0/lib/jquery.min.js'></script>
    <script src='${siteurl}/templates/default/media/js/fullcalendar-3.9.0/lib/jquery-ui.min.js'></script>
    <script src='${siteurl}/templates/default/media/js/fullcalendar-3.9.0/fullcalendar.min.js'></script>
    <script src="${siteurl}/templates/default/media/js/layer/layer.js"></script>
    <script src="${siteurl}/templates/skin2/plugins/layui/layui.js"></script>
    <style>
        body {
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        }

        #wrap {
            width: 1500px;
            margin: 0 auto;
        }

        #external-events {
            float: left;
            width: 150px;
            padding: 0 10px;
            border: 1px solid #ccc;
            background: #eee;
            text-align: left;
        }

        #external-events h4 {
            font-size: 16px;
            margin-top: 0;
            padding-top: 1em;
        }

        #external-events .fc-event {
            margin: 10px 0;
            cursor: pointer;
        }

        #external-events p {
            margin: 1.5em 0;
            font-size: 11px;
            color: #666;
        }

        #external-events p input {
            margin: 0;
            vertical-align: middle;
        }

        #calendar {
            float: left;
            margin-left: 20px;
            width: 1100px;
        }

        .layui-laydate-content > .layui-laydate-list {
            padding-bottom: 0px;
            overflow: hidden;
        }

        .layui-laydate-content > .layui-laydate-list > li {
            width: 50%
        }

        .merge-box .scrollbox .merge-list {
            padding-bottom: 5px;
        }
    </style>
</head>
<body>

<div id='wrap'>
    <div id='external-events'>
        <h4>方案</h4>
        <div class='fc-event' style="color:#000000;background-color: #FFFFCC;border-color:#FFFFCC">加班</div>
    </div>
    <div id='calendar'></div>
    <div id="jump" style="display: none">
        <form class="layui-form" action="" id="main">
            <div class="layui-form-item" style="margin-top: 40px">
                <label class="layui-form-label">方案名</label>
                <div class="layui-input-inline" style="width: 200px">
                    <input type="text" id="planname" name="planname" readonly placeholder="请输入" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">作用范围</label>
                <div class="layui-input-inline" style="width: 50%">
                    <select id="repeattype" name="repeattype" lay-search="">
                        <option value="">直接选择或搜索选择</option>
                        <option value="每周一">每周一</option>
                        <option value="每周二">每周二</option>
                        <option value="每周三">每周三</option>
                        <option value="每周四">每周四</option>
                        <option value="每周五">每周五</option>
                        <option value="每周六">每周六</option>
                        <option value="每周日">每周日</option>
                        <option value="每工作日">每工作日</option>
                        <option value="单次">单次</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" type="submit" lay-submit="" lay-filter="save">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>
    <div id="overtime" style="display: none">
        <form class="layui-form" action="" id="main2" style="margin-top: 40px">
            <div class="layui-form-item">
                <span class="layui-form-label">事件名称</span>
                <div class="layui-input-inline">
                    <input type="text" id="eventname" name="eventname" value="加班" readonly autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="display: none">
                <span class="layui-form-label">事件类型</span>
                <div class="layui-input-inline">
                    <input type="text" id="eventtype" name="eventtype" value="加班" readonly autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <span class="layui-form-label">班组名称</span>
                <div class="layui-input-inline">
                    <input type="text" id="team" name="team" lay-verify="notNull"
                           placeholder="请输入班组名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <span class="layui-form-label">开始时间</span>
                <div class="layui-input-inline">
                    <input type="text" id="startTime" name="starttime" value="" class="layui-input" placeholder="">
                </div>
            </div>

            <div class="layui-form-item">
                <span class="layui-form-label">结束时间</span>
                <div class="layui-input-inline">
                    <input type="text" id="endTime" name="endtime" value="" class="layui-input" placeholder="">
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" type="submit" lay-submit="" lay-filter="save">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>
    <div class="data-table" id="info"
         style="display: none;width: 100%;height: 80%">
        <table id="bug-table" class="layui-hide" lay-filter="bug-table"></table>
        <div id="tools">
            <%
            if(has(token_10125))
            {
            println("<button class='layui-btn' type='submit' lay-submit lay-filter='del'><i class='layui-icon'></i>删除此方案</button>");
            }
            %>
        </div>
        <br/>
    </div>
    <!--<div class="noneBlock" style="display: none">
        <div id="tools">
            <%
            if(has(token_10125))
            {
            println("<a class='layui-btn layui-btn-danger layui-btn-xs' lay-event='del'>删除</a>");
            }
            %>
        </div>
    </div>
-->
    <div style='clear:both'></div>
</div>
<script src="${siteurl}/public/libs/vue.min.js"></script>
<!--业务逻辑JS-->
<script type="text/javascript" src="${siteurl}/templates/skin2/media/js/biz/baseData/calendar/fullcalendar.js"></script>
</body>
<script type="text/javascript">
    var siteurl = '${siteurl}';
</script>
</html>
梦瑶程序媛
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用html完成编辑日程,FullCalendar应用——编辑与删除日程事件
weixin_30550287的博客
06-10 710
HTML和上一篇文章FullCalendar应用——新建日程事件一样，HTML页面我们仍然使用cal_opt.html，这里HTML代码及相关js和css文件的载入就不再详述，如果您是第一次阅读本文，请先从FullCalendar系列文章第一篇看起。jQuery在日历视图中，我们通过单击需要编辑的日程事件项，调用fancybox弹出编辑层。FullCalendar提供了事件单击eventClick...
fullcalendar利用html显示出来而且是最新的3.2.0
05-27
fullcalendar利用html显示出来而且是最新的3.2.0
FullCalendar:全尺寸拖放事件日历-开源
06-04
FullCalendar 生成真实的 React 虚拟 DOM 节点，因此您可以利用 React 高度优化的渲染引擎 Fiber。 FullCalendar 拥有超过 300 项设置，并且每个版本都会添加更多设置，FullCalendar 几乎可以做任何事情。 使用 FullCalendar 的模块化插件减少项目的包大小。 拥有超过 10 年的开源和 100 多名贡献者，FullCalendar 将始终拥有一个免费和开源的核心。 通过购买高级插件和支持来升级。 FullCalendar 与 React JavaScript 框架无缝集成。 它提供了一个与 FullCalendar 的标准 API 的功能完全匹配的组件。 这不仅仅是一个“连接器”。 它告诉核心 FullCalendar 包开始渲染 React 虚拟 DOM 节点，而不是它通常使用的 Preact 节点，将 FullCalendar 转换为“真正的” React 组件。 您可以从这篇博客文章中了解更多信息（更多信息即将发布）。
待办事项下拉html代码,HTML5 + jQuery 实现日历待办事项demo
weixin_30063287的博客
06-04 391
< head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title >业余草jquery日历待办事项 title > < link rel = "stylesheet" href = "css/master.css" ...
vue3 Fullcalendar 实现动态创建、编辑（拖拽）计划
最新发布
weixin_44402343的博客
02-28 554
vue3实现日历创建事项
html日期横向拖动选择控件,html移动端横向日历插件
weixin_39925413的博客
06-03 789
在最近的H5开发工作中，遇到一个横向滑动选择日期的需求，年月修改方式不限，日期为滑动，横向标注星期，每次滑动一周，下面为大家介绍一下我的一个实现思路，有更好的方案欢迎留言。初期效果页面结构与动画分析日期部分，采用了三个容器，利用transform布局于页面左中右侧；判断页面滑动事件，滑动方向和距离满足条件之后，通过改变元素transform，配合transition实现动画效果；即将被移出的diy...
html下拉日历模块,web报表中使用“Html格子数据类型”引入自定义下拉日历控件...
weixin_39564151的博客
06-03 174
下拉日历是润乾报表为日期填报提供的一个便捷功能，可以让用户快速准确的填写日期信息，避免了手动填写所产生的的格式误差和数值误差。但润乾自带的下拉日历可能风格与具体开发的页面风格不相统一，而开发者想使用自己已经开发出的自定义下拉日历同时又不想完全摆脱方便快捷的润乾报表。因此，开发者想了解如何在润乾报表的开发中嵌入自己开发的下拉日历控件。比如参数模板报表中如何调用自己的下拉日历控件。本文以一个具体的例子...
vue中使用FullCalendar在移动端的点击拖拽功能
weixin_52526109的博客
07-01 1100
vue中使用FullCalendar插件时，在pc端点击拖拽是正常的，但是在移动端时，点击没有反应
用fullcalendar做的日程管理
03-27
用fullcalendar做的日程管理，有代码
fullcalendar实现拖拽方案到日历中--js
weixin_41593364的博客
04-15 1793
fullcalendar实现拖拽方案到日历中 js代码. var form; var planid; var planname; var date; var html = ""; var events = []; var table; var delplname; var deldate; var delrepeattype; var index1; var index2; var index3;...
日程列表html,日程安排FullCalendar
weixin_28866737的博客
06-15 766
HTML首先第一步就是在需要调用FullCalendar日历的页面中载入必要的javascript和css文件，包括jQuery库文件，FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日历的功能，就还需要加入jQuery ui插件。然后，在页面的body里加入div#calendar，用来放置日历主体。jQuery现在我们需要在页面加载完成后，调用FullCalen...
fullcalendar日历插件展示html内容
qq_42276876的博客
07-25 3088
eventRender: function (event, element) { element.html(event.title); }   在title加上HTML代码，再加上这个方法就可以显示出HTML内容了
一个支持拖动的日历组件。
06-08
DraggableCalendar 一个支持拖动操作的日历组件。 1. 示例 下载存储库，cd 示例目录，并在模拟器上运行它。 git clone [email protected]:SmallStoneSK/react-native-draggable-calendar.git cd examples react-native run-ios # for ios react-native run-android # for android 2. 用法 首先，你应该安装 react-native -可拖动日历。 像这样： npm install react-native-draggable-calendar --save 对于基本用法，你可以这样使用： export class BasicUsageDemo extends Component { constructor(props) { super(props); } onGetTime = () => { // 可以得到选中的时间。 console.log('onGetTime: ', this._calendar.getSelec
dragcalendar一个可拖拽日历组件
08-10
drag-calendar 一个可拖拽日历组件
FullCalendar 2.9 排课实例,课节，拖拽
08-11
FullCalendar 2.9 实现的排课页面，实现了课程展示，bootstrap弹框，layer浮动层展示功能
fsLayui是一个基于layui的快速开发插件
09-03
fsLayui快速开发插件源码 作用支持数据表格增删改查操作，提供通用的组件，通过配置html实现数据请求，减少前端js重复开发的工作
PHP+Mysql+FullCalendar日历拖动与数据保存
08-30
PHP+Mysql+FullCalendar日历拖动与数据保存
Fullcalendar带日程安排的日历
11-13
FullCalendar 是一个jQuery插件，它提供一个全尺寸，像事例中的拖拽日历。它使用 AJAX 来为每个月提取事件并轻松地配置为使用您自己资料的格式 。它是以可视方式自定义并公开为用户触发事件 （如单击或拖动事件） ...
日历 利用js制作Html日历插件 可在日历里面根据需求插入数据
fang5211的博客
07-06 1631
可修改的日历插件
php+mysql+fullcalendar日历拖动与数据保存
08-30
这样，当用户拖动日历中的事件时，FullCalendar会自动发送一个AJAX请求到"update_event.php"脚本，该脚本会接收并处理这个请求，然后更新数据库中对应事件的起止日期。 以上就是使用PHP、MySQL和FullCalendar实现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值