使用没有日期的 FullCalendar

2024-01-05

现在,我正在制定课程表。我的想法是设置全日历 https://fullcalendar.io/查看到agendaWeek仅并格式化其他内容。我不知道如何获取和添加事件的编程方面,因为我不会在此实例中使用任何日期。

这是schedule table:

| schedid | subjectcode | prof_id  | day     | start_time | end_time | duration | room |
-------------------------------------------------------------------------------------------
| 1       | TECHNO      | 16-00001 | Monday  | 11:00:00   | 14:00:00 | 3        | SL   |
| 2       | TECHNO      | 16-00001 | Tuesday | 10:30:00   | 13:30:00 | 3        | SL   |

这就是我想要实现的目标:

我读过文档,读得越多,我就越不知道该怎么做,而且我真的不知道如何实现它,因为 FullCalendar 取决于日期。任何建议和帮助将不胜感激。

EDIT:

这是我的 FullCalendar 脚本:

$(document).ready(function() {
    $("#add-sched").fullCalendar({
        header: false,
        columnFormat: 'dddd',
        allDaySlot: false,
        hiddenDays: [0],
        defaultView: 'agendaWeek',
        minTime: '07:00:00',
        maxTime: '21:00:00',
        editatble: true,
        events: [ // values will be coming from an ajax call so I'm just placing here what inputs I would like
            {
                title: 'Event',
                start: 'MondayT11:00:00', //what I would like to input
                end: 'MondayT11:00:00',
//                start: '2016-12-12T11:00:00',
//                end: '2016-12-12T14:00:00',
                editable: true
            }
        ]
    });
});

如果我理解你的目标,你需要静态的一周日历。事件不会按日期更改,只会按日期名称更改。

所以我重写了之前的解决方案。在此变体中,形成关联数组,其中包含本周的日期,键是日期的名称。日期可以通过日期名称访问,因此您不需要在数据库中存储日期 请看一下这个。

HTML页面(不重要代码):

<html>
<head>
<meta charset='utf-8' />
<link href='/something/fullcalendar.min.css' rel='stylesheet' />
<link href='/something/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='/something/lib/moment.min.js'></script>
<script src='/something/lib/jquery.min.js'></script>
<script src='/something/fullcalendar.min.js'></script>
<script src='/something/initCalendar.js'></script> <!-- Script with all important stuff-->
<style>
    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

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

</style>
</head>
<body>

    <div id='calendar'></div>

</body>
</html>

initCalendar.js代码(最重要的部分):

 Date.prototype.getDaysOfCurrentWeek = function(start)
    {
        // Array of all days of week
        var days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

    // Calculates date of first day of current week
    start = start || 0;
    var today = new Date(this.setHours(0, 0, 0, 0));
    var day = today.getDay() - start;
    var date = today.getDate() - day;

    // Then we are calculating all dates of current week and then reformat them into ISOO
    var daysOfWeek = new Object();
    for(i = 0; i < 8; i++) {
        tmp = new Date(today.setDate(date+i));
        daysOfWeek[days[i]] = tmp.getFullYear()+'-'+(tmp.getMonth()+1)+'-'+tmp.getDate();
    }

    return daysOfWeek;
}


var days = new Date().getDaysOfCurrentWeek(); // gets array like ('nameOfDay' => 0000-00-00)
$(document).ready(function(){
    $('#calendar').fullCalendar({
          header: false,
          columnFormat: 'dddd',
          allDaySlot: false,
          hiddenDays: [0],
          defaultView: 'agendaWeek',
          minTime: '07:00:00',
          maxTime: '21:00:00',
          editatble: true,
    });
    $.post( "getevents2.php",
            {'getEvents': 1},
            function(data) {
                var array = JSON.parse(data);
                for(i = 0; i < array.length; i++) {
                    $('#calendar').fullCalendar( 'renderEvent', {
                        title: 'Sometitle',
                        start: days[array[i]['day']]+'T'+array[i]['start_time'], // here we are setting needed date from array 'days' by day's name which we got from database
                        end: days[array[i]['day']]+'T'+array[i]['end_time']     // here's the same
                    } );
                }
            }
    );
});

getevents2.php的PHP代码:

if(isset($_POST['getEvents'])) {
    $result = $db->query("SELECT * FROM `calendar`");
    $return = array();
    while($row = $result->fetch_assoc()) {
        $return[] = $row;
    }

    echo json_encode($return);
}

这是你所需要的吗?还是我又做错了?

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用没有日期的 FullCalendar 的相关文章

  • PHP header() 和 jquery mobile

    我想使用 php header Location newpage php 进行重定向 我没有收到错误 但 Jquery mobile 似乎无法加载目标页面 并且地址栏仍保留旧地址 请问您有什么建议吗 Thanks 尝试添加data ajax
  • CSV 从 UTF8 到 ISO-8859-1

    我正在尝试修改我的 CSV 导出 但它不会将我的 CSV 从 UTF 8 转换 保存为 ISO 8859 1 请问我做错了什么吗 实际上自从修改了这个之后 我得到了一个空的 CSV 文件 php 7 0 x function my Gene
  • WAMP 不显示目录列表中的图标

    过去 我通过 vmware 处理 PHP 代码 但最近我决定转而通过 WAMP 在 Windows 8 1 上 在本地进行处理 我创建了一个空文件夹tests in the www folder 然后在我的浏览器上输入http localh
  • 登录后所有页面都应该是https吗?

    这有点难以解释 但我会尽力 有一个网站 每个页面上都有登录表单 其中包含用户名 密码字段 这些页面未使用 SSL 用户填写用户名 密码并提交表单后 表单将被发送到 https 的身份验证页面 对于这种情况我有几个疑问 向 https 页面提
  • 如何重定向到另一个页面并从表中传递 url 中的参数?

    如何重定向到另一个页面并从表中传递 url 中的参数 我在龙卷风模板中创建了类似的东西 table thead tr th Username th th Nation th th Rank th th th tr thead tbody f
  • jQuery 选择器在控制台中不起作用

    我一辈子都无法解决这个问题 我正在运行 js 容器状态 是页面上正在运行的 js 的控制台日志 它显示一个选择器 但如果我想在控制台中执行任何操作 它只会返回 null 我假设我在某个地方过度编写了 jQuery 函数 就好像我调用了 jQ
  • 如何在 JdbcTemplate 中创建 mySQL 存储过程

    背景 为了解决 MySql 中某些语句只允许在存储过程中出现的问题 我尝试在 JdbcTemplate 提交的 sql 中创建 运行然后删除存储过程 一个简单的例子是 这恰好是在 Spring Boot 中 Service public c
  • 使用 DOM 获取 div 的内容(包括子标签)

    我正在使用 DOM 来获取 div 标签的内容 但内部 html 部分未显示 功能是 dom new DOMDocument libxml use internal errors true dom gt loadHTMLFile url l
  • 使用 php 和 symfony 从数组创建 Excel 文件

    我正在尝试使用 PHP 和 symfony 将数组导出为 XLS 文件 如下面的代码所示 创建 XLS 文件后 我只能获取数组的最后一行 并且它显示在文件的第一行中 似乎 lignes 变量没有增加 我不明白出了什么问题 有人可以帮忙吗 f
  • 如何从代码隐藏文件中的asp.net用户控件注册(调用)jQuery函数?

    如何从代码隐藏文件中的asp net用户控件注册 调用 jQuery函数 您可以使用ClientScriptManager RegisterStartupScript http msdn microsoft com en us librar
  • 如何将 jquery 添加到 Appcelerator Titanium Mobile Work?

    是否可以将 jquery 集成到 Titanium Appcelerator 中并且它可以正常工作吗 否则我们不能将jquery集成到titanium appcelerator中 有人帮助我吗 你到底想做什么 我不确定它在没有 DOM 的情
  • 从外部 bash 设置环境变量

    我试图使用 PHP 从命令行 设置 bash 环境变量 但没有成功 buff array buff VARTESTKEY VARTESTVALUE buff export VARTESTKEY file put contents scrip
  • 使 div 的大小与其内部图像的大小相同

    我有一个带有以下代码的div HTML div img src img logo png div CSS div imgContainer width 250px height 250px padding 13px 问题是用户可以编辑图像大
  • sqlsrv_num_rows 不返回任何值

    我正在尝试获取查询中返回的行数 while 循环遍历结果有效 但由于某种原因 sqlsrv num rows 不返回任何值 result SELECT from dtable WHERE id2 apple query sqlsrv que
  • 只返回 $.ajax 传递的 JSON 数据的前 20 个结果?

    我有以下简单的 jquery 片段 document ready function ajax url myjson json dataType json success function json each json function al
  • 如何显示不同页眉的页面? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我正在为我的学校项目开发网站 但我遇到了一个问题 我在每个页面上显示一个标题 我的标题之一包含登录表单 另一标题包含用户名 搜索栏等 问题是
  • NodeJS 和 PHP (Laravel) 集成用于 Socket.IO 实时聊天

    目前我有一个我写过的网站PHP通过Laravel 框架 我已经使用写了一个实时聊天nodeJS with 套接字IO and Express现在我想做的是将它集成到我已经编写的 Laravel 网站中 问题是聊天必须在主页中 当前由 Lar
  • 如何防止IE11弹出(您确定要离开此页面)

    我正在处理一个页面 除了一个下拉菜单可供选择外 我无需输入任何内容 但在 IE11 中 当我尝试转到下一页时 它会弹出该消息 我想阻止这种弹出的发生 所以我只是想知道 IE11 中弹出窗口的默认行为是什么 因为它不会出现在 Chrome 或
  • HTML:JavaScript:阻止表单提交并调用 Javascript 函数

    我想在按下表单中的提交按钮时进行 AJAX 调用 事实上我无法删除
  • PHP 中的 Zip 流

    我有一个 PHP 脚本 可以动态创建 zip 文件并强制浏览器下载该 zip 文件 问题是 我可以直接将zip文件写入连接到用户浏览器的输出流 而不是先将其保存为服务器上的真实文件 然后发送文件吗 提前致谢 如果您的 Web 服务器运行的是

随机推荐