helloxielan 2015-05-03 13:31 采纳率: 0%
浏览 89

如何将存储在数据库中的事件显示在日历中？

如何将存储在数据库中的事件显示在日历中？我不知道如何用自己的日期替换随机日期.....是不是必须遍历数据库获得的数据？并把数据修改为JSON格式？我可以用前轮吗？

这是zabuto日历下载网站提供的代码：

<?php include_once 'includes/sessions.php'; ?>
<?php include_once 'includes/connect.php';
/**
 * Example of JSON data for calendar
*
* @package zabuto_calendar
*/


if (!empty($_REQUEST['year']) && !empty($_REQUEST['month'])) {
$year = intval($_REQUEST['year']);
$month = intval($_REQUEST['month']);
$lastday = intval(strftime('%d', mktime(0, 0, 0, ($month == 12 ? 1 : $month + 1), 0, ($month == 12 ? $year + 1 : $year))));


$dates = array();
for ($i = 0; $i <= (rand(4, 10)); $i++) {
    $date = $year . '-' . str_pad($month, 2, '0', STR_PAD_LEFT) . '-' . str_pad(rand(1, $lastday), 2, '0', STR_PAD_LEFT);

$dates[$i] = array(
        'date' => $date,
        'badge' => ($i & 1) ? true : false,
        'title' => 'Example for ' . $date,
        'body' => '<p class="lead">Information for this date</p><p>You can add <strong>html</strong> in this block</p>',
        'footer' => 'Extra information',
    );

    if (!empty($_REQUEST['grade'])) {
        $dates[$i]['badge'] = false;
        $dates[$i]['classname'] = 'grade-' . rand(1, 4);
    }

    if (!empty($_REQUEST['action'])) {
        $dates[$i]['title'] = 'Action for ' . $date;
        $dates[$i]['body'] = '<p>The footer of this modal window consists of two buttons. One button to close the modal window without further action.</p>';
        $dates[$i]['body'] .= '<p>The other button [Go ahead!] fires myFunction(). The content for the footer was obtained with the AJAX request.</p>';
        $dates[$i]['body'] .= '<p>The ID needed for the function can be retrieved with jQuery: <code>dateId = $(this).closest(\'.modal\').attr(\'dateId\');</code></p>';
        $dates[$i]['body'] .= '<p>The second argument is true in this case, so the function can handle closing the modal window: <code>myFunction(dateId, true);</code></p>';
        $dates[$i]['footer'] = '
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="dateId = $(this).closest(\'.modal\').attr(\'dateId\'); myDateFunction(dateId, true);">Go ahead!</button>
        ';
    }
}

echo json_encode($dates);

} else {
echo json_encode(array());
}
  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-03 19:11
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    要将存储在数据库中的事件显示在日历中，你可以使用AJAX来动态更新日历。以下是一个简单的示例，展示了如何使用PHP和jQuery实现这个功能：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .event-container {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

    <!-- Your existing HTML structure -->
    
    <div id="calendar" class="container-fluid">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Title</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody id="events-body"></tbody>
        </table>
    </div>

    <script>
        // Initialize your PHP code here

        $(document).ready(function() {
            // Replace this with your actual database query to get events
            $.getJSON('your_database_query_here', function(data) {
                var eventContainer = $('#events-body');

                $.each(data.events, function(index, event) {
                    var eventRow = $('<tr>');
                    
                    var dateCell = $('<td>').text(event.date);
                    eventRow.append(dateCell);

                    var titleCell = $('<td>').text(event.title);
                    eventRow.append(titleCell);

                    var actionsCell = $('<td>');

                    var deleteButton = $('<button>')
                        .addClass('btn btn-danger')
                        .text('Delete');
                    actionsCell.append(deleteButton);

                    eventRow.append(actionsCell);

                    eventContainer.append(eventRow);
                });
            });

            // Update the calendar with new events
            setInterval(updateCalendar, 1000); // Update every second
        });

        function updateCalendar() {
            $.getJSON('your_database_query_here', function(data) {
                // Clear previous events from the calendar
                $('#events-body tr').remove();

                // Add new events to the calendar
                $.each(data.events, function(index, event) {
                    var eventRow = $('<tr>');
                    
                    var dateCell = $('<td>').text(event.date);
                    eventRow.append(dateCell);

                    var titleCell = $('<td>').text(event.title);
                    eventRow.append(titleCell);

                    var actionsCell = $('<td>');

                    var deleteButton = $('<button>')
                        .addClass('btn btn-danger')
                        .text('Delete');
                    actionsCell.append(deleteButton);

                    eventRow.append(actionsCell);

                    $('#events-body').append(eventRow);
                });
            });
        }
    </script>
</body>
</html>

    在这个示例中，我们首先获取了数据库中的所有事件，并将其添加到一个HTML表格中。然后，我们在每个事件上都创建了一个按钮，当用户点击这些按钮时，会触发一个JavaScript函数，该函数会在后台调用你的PHP脚本来处理事件。

    注意：这只是一个基本的示例，实际应用可能需要根据你的具体需求进行调整。例如，你可能需要处理更复杂的事件（如拖拽、点击等），或者使用不同的方式来展示事件信息（如HTML或Markdown）。

    评论

报告相同问题？

  • Calendar-Backend:将事件保存在日历中-NodeExpressSQLiteSequelize
    2021-03-26 10:25
    在本项目中，SQLite用于存储日历事件的数据，简单易用且适合小型应用或原型开发。 4. **Sequelize**：Sequelize是一个强大的ORM库，支持Node.js，它可以与多种SQL数据库（如SQLite、MySQL、PostgreSQL等）交互。...
  • 如何在日历应用中添加事件管理功能
    2025-04-09 14:51
    八大山狗的博客 本文主要讲述了如何在一个日历应用中添加创建、编辑和删除事件的功能。通过实现一个Calendar类，以及相关的构造函数、方法和表单处理逻辑，我们能够为用户提供一个交互式的日历，其中包含了添加新事件、查看事件详情...
  • 从数据库中绑定日历控件
    2021-04-05 22:45
    本文将深入探讨如何从数据库中绑定日历控件，以显示和管理节假日列表及其相关信息。这个过程涉及到SQL数据库的查询，C#后端代码的编写以及ASP.NET前端控件的使用。 首先，我们需要一个存储节假日信息的数据库结构。...
  • 支持节假日高亮显示的时间日期日历表
    2020-06-06 01:04
    在IT行业中，时间日期日历表是用户界面（UI）设计中的重要元素，尤其是在日程管理、任务规划和事件提醒等应用中。标题"支持节假日高亮显示的时间日期日历表"表明我们要讨论的是一个具有特定功能的日历组件，即能够...
  • calendar-punchcard:在日历中记录您的时间
    2021-06-14 06:23
    《在日历中记录您的时间：使用Java实现日历打卡功能》 日历打卡系统是一种高效的时间管理工具，它允许用户在日历上记录每天的工作、学习或生活事件，以便更好地跟踪时间分配和提高生产力。在Java编程环境中，我们...
  • ASP.NET中实现数据库绑定的日历控件
    2025-04-28 11:15
    拼命阿白的博客 ASP.NET日历控件提供了模板功能，允许开发者自定义特定日期的显示方式。...日历控件除了展示日历信息之外，还能够触发多种事件，如和DayRender事件，开发者可以在这些事件的处理程序中实现自定义逻辑。
  • 日历事件组件网页模板
    2021-01-23 08:43
    2. **事件**：指的是用户可以在日历上创建和管理的事项，需要数据库支持以存储用户数据，通常与服务器进行API交互。 3. **组件**：在Web开发中，组件是可重用的代码块，可以独立于其他部分进行开发和测试。在这里，...
  • 微信运动步数在日历上显示(Java+小程序）源码.zip
    2024-05-18 10:11
    在这个项目中，我们主要探讨的是如何利用Java后端技术和微信小程序来实现微信运动步数在日历上的显示。这是一个结合了移动应用开发、后端服务和数据可视化的技术实践，非常适合用作毕业设计、期末大作业或者课程设计...
  • Asp.net中Calendar日历控件中点击日期的鼠标双击事件
    2014-02-14 11:50
    在你的项目中，你希望在用户双击日历上的日期时触发一个日程添加功能，这涉及到对控件事件的处理以及前端与后端的交互。以下是对这个知识点的详细讲解： 首先，`asp.net`中的`Calendar`控件提供了丰富的事件处理...
  • daily-calender:一个简单的应用程序，用于显示存储在JSON文件中的每日计划事件
    2021-05-17 11:32
    在这款日历应用中，JSON文件扮演了数据库的角色，存储用户的日程信息。每个日程可能包含日期、时间、事件标题和描述等关键字段。应用程序通过读取这些JSON文件，将数据转化为用户友好的格式，如日视图、周视图或月...
  • 没有解决我的问题, 去提问