国产精品久久久久久av福利,中文字幕亚洲欧美日韩在线不卡

從數(shù)據(jù)庫獲取數(shù)據(jù)并在日歷中顯示：完整教程

zuojiankuohaophpcnp>本文檔旨在指導(dǎo)開發(fā)者如何從數(shù)據(jù)庫中獲取事件數(shù)據(jù)，并將其集成到 JavaScript 日歷中進行可視化展示。我們將重點講解如何使用 jQuery 和 PHP 從數(shù)據(jù)庫中提取數(shù)據(jù)，并將其轉(zhuǎn)換為日歷組件能夠識別的事件格式，最終實現(xiàn)動態(tài)更新日歷事件的功能。</p> ### 1. 數(shù)據(jù)準備與后端接口首先，我們需要一個數(shù)據(jù)庫來存儲事件信息，并創(chuàng)建一個 PHP 腳本來從數(shù)據(jù)庫中提取數(shù)據(jù)，并以 JSON 格式返回。 **數(shù)據(jù)庫表結(jié)構(gòu)示例：** 假設(shè)我們有一個名為 `MarcErpi` 的表，用于存儲餐點預(yù)訂信息，包含以下字段： * `PequenoAlm` (早餐): VARCHAR * `Alm` (午餐): VARCHAR * `Lan` (點心): VARCHAR * `jant` (晚餐): VARCHAR * `Ceia` (夜宵): VARCHAR * `Valencia` (地點): VARCHAR * `Data` (日期): DATE * `Colaborador` (預(yù)訂者): INT **PHP 后端代碼 (consrefeicoes.php):** ```php <?php session_start(); // 確保session已啟動 $Colaborador = $_SESSION['usuarioId']; // 從session獲取用戶ID，需要根據(jù)你的實際情況修改 $servername = "your_servername"; // 替換為你的數(shù)據(jù)庫服務(wù)器名稱 $username = "your_username"; // 替換為你的數(shù)據(jù)庫用戶名 $password = "your_password"; // 替換為你的數(shù)據(jù)庫密碼 $dbname = "your_dbname"; // 替換為你的數(shù)據(jù)庫名稱 try { $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password); $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $query = $conn->prepare("SELECT PequenoAlm, Alm, Lan, jant, Ceia, Valencia, YEAR(Data) AS Ano, Colaborador, MONTH(Data) AS mes, DAY(Data) AS dia FROM MarcErpi WHERE Colaborador = ?"); $query->execute([$Colaborador]); $json = []; while($row = $query->fetch(PDO::FETCH_ASSOC)) { $json[] = $row; // 直接使用關(guān)聯(lián)數(shù)組 } echo json_encode($json); } catch(PDOException $e) { echo "Connection failed: " . $e->getMessage(); } $conn = null; ?>

代碼解釋：

連接數(shù)據(jù)庫: 使用 PDO 連接到 MySQL 數(shù)據(jù)庫。
查詢數(shù)據(jù): 根據(jù)當(dāng)前用戶的ID (Colaborador) 查詢 MarcErpi 表中的數(shù)據(jù)。
構(gòu)建 JSON: 將查詢結(jié)果轉(zhuǎn)換為 JSON 格式。每一行數(shù)據(jù)直接作為一個關(guān)聯(lián)數(shù)組添加到 $json 數(shù)組中。
返回 JSON: 使用 json_encode() 函數(shù)將 $json 數(shù)組轉(zhuǎn)換為 JSON 字符串并輸出。

注意事項：

請?zhí)鎿Q代碼中的數(shù)據(jù)庫連接信息（服務(wù)器名稱、用戶名、密碼、數(shù)據(jù)庫名稱）為你的實際配置。
確保已啟動 PHP 的 session，并且 $_SESSION['usuarioId'] 包含有效的用戶ID。
錯誤處理：添加了 try-catch 塊來處理數(shù)據(jù)庫連接和查詢可能出現(xiàn)的異常，并在出現(xiàn)錯誤時輸出錯誤信息。

2. 前端 JavaScript 代碼

接下來，我們需要使用 JavaScript (jQuery) 從 PHP 接口獲取 JSON 數(shù)據(jù)，并將其轉(zhuǎn)換為日歷組件可以識別的事件格式。

JavaScript 代碼：

var event_data = {
    "events": []
};

$(document).ready(function () {
    $.getJSON('consrefeicoes.php', function (data) {
        $.each(data, function (key, val) {
            event_data.events.push({
                "occasion": val.PequenoAlm || val.Alm || val.Lan || val.jant || val.Ceia || "無", // 如果沒有值，顯示"無"
                "invited_count": val.Valencia,
                "year": Number(val.Ano),
                "month": Number(val.mes),
                "day": Number(val.dia),
                "cancelled": false // 根據(jù)實際情況設(shè)置
            });
        });
        // 在數(shù)據(jù)加載完成后初始化日歷
        init_calendar(new Date());
    });
});

function check_events(day, month, year) {
    var events = [];
    for (var i = 0; i < event_data["events"].length; i++) {
        var event = event_data["events"][i];
        if (event["day"] === day &&
            event["month"] === month &&
            event["year"] === year) {
            events.push(event);
        }
    }
    return events;
}

登錄后復(fù)制

代碼解釋：

初始化 event_data: 創(chuàng)建一個空的 event_data 對象，用于存儲從數(shù)據(jù)庫獲取的事件數(shù)據(jù)。
使用 $.getJSON() 獲取數(shù)據(jù): 使用 jQuery 的 $.getJSON() 方法從 consrefeicoes.php 接口獲取 JSON 數(shù)據(jù)。
遍歷 JSON 數(shù)據(jù): 使用 $.each() 方法遍歷 JSON 數(shù)據(jù)，并將每個事件轉(zhuǎn)換為日歷組件可以識別的格式。
構(gòu)建事件對象: 為每個事件創(chuàng)建一個對象，包含 occasion (事件名稱), invited_count (地點), year (年份), month (月份), day (日期) 和 cancelled (是否取消) 屬性。
- occasion 字段使用 val.PequenoAlm || val.Alm || val.Lan || val.jant || val.Ceia || "無" 確保如果早餐、午餐等字段為空，則顯示 "無"。
- year、month 和 day 字段使用 Number() 函數(shù)將字符串轉(zhuǎn)換為數(shù)字。
將事件添加到 event_data: 將創(chuàng)建的事件對象添加到 event_data.events 數(shù)組中。
在數(shù)據(jù)加載完成后初始化日歷: 在 $.getJSON() 的回調(diào)函數(shù)中調(diào)用 init_calendar(new Date()) 函數(shù)，確保在數(shù)據(jù)加載完成后再初始化日歷。
check_events 函數(shù)： 此函數(shù)用于檢查特定日期是否有事件。它遍歷 event_data.events 數(shù)組，并將匹配日期（日、月、年）的事件添加到 events 數(shù)組中。

注意事項：

確保你已經(jīng)引入了 jQuery 庫。
根據(jù)你的日歷組件的要求，調(diào)整事件對象的屬性名稱和格式。
month 的值需要進行調(diào)整，因為 JavaScript 中 month 的范圍是 0-11，而數(shù)據(jù)庫中可能是 1-12。
cancelled 屬性可以根據(jù)數(shù)據(jù)庫中的實際情況進行設(shè)置。

3. 日歷組件集成

最后，將 event_data 數(shù)據(jù)集成到你的日歷組件中。具體集成方式取決于你使用的日歷組件。你需要修改 show_events 函數(shù)，使其能夠正確地顯示從數(shù)據(jù)庫中獲取的事件。

蘆筍演示

一鍵出成片的錄屏演示軟件，專為制作產(chǎn)品演示、教學(xué)課程和使用教程而設(shè)計。

查看詳情

修改 show_events 函數(shù)：

function show_events(events, month, day) {
    $(".events-container").empty();
    $(".events-container").show(250);

    if (events.length === 0) {
        var event_card = $("<div class='event-card'></div>");
        var event_name = $("<div class='event-name'>N?o há refei??es marcadas para " + day + "  " + month + ".</div>");
        $(event_card).css({
            "border-left": "10px solid #FF1744"
        });
        $(event_card).append(event_name);
        $(".events-container").append(event_card);
    } else {
        for (var i = 0; i < events.length; i++) {
            var event_card = $("<div class='event-card'></div>");
            var event_name = $("<div class='event-name'>" + events[i]["occasion"] + ":</div>");
            var event_count = $("<div class='event-count'>" + events[i]["invited_count"] + "</div>");

            if (events[i]["cancelled"] === true) {
                $(event_card).css({
                    "border-left": "10px solid #FF1744"
                });
                event_count = $("<div class='event-cancelled'>Cancelled</div>");
            }
            $(event_card).append(event_name).append(event_count);
            $(".events-container").append(event_card);
        }
    }
}

登錄后復(fù)制

代碼解釋：

此函數(shù)接收 events 數(shù)組，month 和 day 作為參數(shù)。
如果 events 數(shù)組為空，則顯示一條消息，指示該日期沒有預(yù)訂。
否則，它會遍歷 events 數(shù)組，并為每個事件創(chuàng)建一個 event-card 元素，并將其添加到 events-container 中。
事件卡片包含事件的名稱 (occasion) 和地點 (invited_count)。
如果事件被取消 (cancelled 為 true)，則會在卡片上顯示 "Cancelled" 標(biāo)記。

4. 完整示例代碼

以下是完整的示例代碼，包括 HTML、CSS 和 JavaScript：

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Calendar with Database Events</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="conteent">
        <div class="calendar-container">
            <div class="calendar">
                <div class="year-header">
                    <span class="left-button" id="prev"> &lang; </span>
                    <span class="year" id="label"></span>
                    <span class="right-button" id="next"> &rang; </span>
                </div>
                <div class="year-header">
                    <span class="left-button1" id="prev1"> &lang; </span>
                    <span class="mes" id="label"></span>
                    <span class="right-button1" id="next1"> &rang; </span>
                </div>
                <table class="days-table">
                    <td class="day">Dom</td>
                    <td class="day">Seg</td>
                    <td class="day">Ter</td>
                    <td class="day">Qua</td>
                    <td class="day">Qui</td>
                    <td class="day">Sex</td>
                    <td class="day">Sab</td>
                </table>
                <div class="frame">
                    <table class="dates-table">
                        <tbody class="tbody">
                        </tbody>
                    </table>
                </div>
                <button class="bbuutton" id="add-button">Marca??o</button>
            </div>
        </div>
        <div class="events-container"></div>
        <div class="diaalog" id="diaalog">
            <h2 class="diaalog-header"> Adicionar Nova Refei??o </h2>
            <form class="fform" id="fform">
                <div class="form-ccontainer" align="center">
                    <p class="form-labeel">Pequenas Refei??es <span style="color: red;">*</span></p>
                    <div class="radio_containner">
                        <input type="checkbox" class="inradio" name="reff" id="reff" value="Peq_Almo?o">
                        <label for="reff" class="labradio">Pequeno-Almo?o</label>
                        <input type="checkbox" class="inradio" name="reff1" id="reff1" value="Lanche">
                        <label for="reff1" class="labradio" style="margin-left: 3%;">Lanche</label>
                        <input type="checkbox" class="inradio" name="reff2" id="reff2" value="Ceia">
                        <label for="reff2" class="labradio" style="margin-left: 3%;">Ceia</label>
                    </div>
                    <p class="form-labeel">Refei??o <span style="color: red;">*</span></p>
                    <div class="radio_containner">
                        <input type="checkbox" class="inradio" name="almm" id="almm" value="Almo?o">
                        <label for="almm" class="labradio">Almo?o</label>
                        <input type="checkbox" class="inradio" name="almm1" id="almm1" value="Almo?o_(Dieta)">
                        <label for="almm1" class="labradio" style="margin-left: 3%;">Almo?o Dieta</label>
                        <input type="checkbox" class="inradio" name="almm2" id="almm2" value="Jantar">
                        <label for="almm2" class="labradio" style="margin-left: 3%;">Jantar</label>
                        <input type="checkbox" class="inradio" name="almm3" id="almm3" value="Jantar_(Dieta)">
                        <label for="almm3" class="labradio" style="margin-left: 3%;">Jantar Dieta</label>
                    </div>
                    <div class="form-group">
                        <p class="form-labeel"> Valência <span style="color: red;">*</span></p>
                        <select class="js-states form-control ajuste sssinglett" name="valref" id="valref">
                            <option></option>
                            <option value="3" selected> ERPI</option>
                        </select>
                    </div>
                    <label for="Dataref" class="form-labeel">Período de Marca??o </label>
                    <input type="date" class="inpuut" name="Dataref" id="Dataref">
                    <div class="ajustebot">
                        <input type="button" value="Cancel" class="bbuutton" id="cancel-button">
                        <input type="button" value="OK" class="bbuutton" id="ok-button">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

登錄后復(fù)制

CSS (style.css):

/*  Events display */

.events-container {
  overflow-y: scroll;
  height: 100%;
  margin: 0px auto;
  font: 13px Helvetica, Arial, sans-serif;
  display: inline-block;
  padding: 0 10px;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

.events-container:after {
  clear: both;
}

.event-card {
  padding: 20px 0;
  width: 350px;
  margin: 20px auto;
  display: block;
  background: #fff;
  border-left: 10px solid #52A0FD;
  border-radius: 3px;
  box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -webkit-box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.event-count,
.event-name,
.event-cancelled {
  display: inline;
  padding: 0 10px;
  font-size: 1rem;
}

.event-count {
  color: #52A0FD;
  text-align: right;
}

.event-name {
  padding-right: 0;
  text-align: left;
}

.event-cancelled {
  color: #FF1744;
  text-align: right;
}


/*  Calendar wrapper */

.calendar-container {
  position: relative;
  margin: 0px auto;
  height: 100%;
  background: #fff;
  font: 13px Helvetica, Arial, san-serif;
  display: inline-block;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

.calendar-container:after {
  clear: both;
}

.calendar {
  display: table;
}


/* Calendar Header */

.year-header {
  background: #52A0FD;
  background: -moz-linear-gradient(left, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  background: -webkit-linear-gradient(left, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  background: linear-gradient(to right, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  font-family: Helvetica;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  height: 40px;
  text-align: center;
  position: relative;
  color: #fff;
  border-top-left-radius: 3px;
}

.year-header span {
  display: inline-block;
  font-size: 20px;
  line-height: 40px;
}

.left-button,
.right-button {
  cursor: pointer;
  width: 28px;
  text-align: center;
  position: absolute;
}

.left-button1,
.right-button1 {
  cursor: pointer;
  width: 28px;
  text-align: center;
  position: absolute;
}

.left-button {
  left: 0;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}

.left-button1 {
  left: 0;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}

.right-button {
  right: 0;
  top: 0;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
}

.right-button1 {
  right: 0;
  top: 0;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
}

.left-button:hover {
  background: #3FADFF;
}

.left-button1:hover {
  background: #3FADFF;
}

.right-button:hover {
  background: #00C1FF;
}

.right-button1:hover {
  background: #00C1FF;
}

.ajustebot {
  margin-top: -5%;
}


/* Buttons */

.bbuutton {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  font-size: 1rem;
  border-radius: 25px;
  padding: 0.65rem 1.9rem;
  transition: .2s ease all;
  color: white;
  border: none;
  box-shadow: -1px 10px 20px #9BC6FD;
  background: #52A0FD;
  background: -moz-linear-gradient(left, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  background: -webkit-linear-gradient(left, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  background: linear-gradient(to right, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
}

#cancel-button {
  box-shadow: -1px 10px 20px #FF7DAE;
  background: #FF1744;
  background: -moz-linear-gradient(left, #FF1744 0%, #FF5D95 80%, #FF5D95 100%);
  background: -webkit-linear-gradient(left, #FF1744 0%, #FF5D95 80%, #FF5D95 100%);
  background: linear-gradient(to right, #FF1744 0%, #FF5D95 80%, #FF5D95 100%);
}

#add-button {
  display: block;
  position: absolute;
  right: 20px;
  bottom: 20px;
}

#add-button:hover,
#ok-button:hover,
#cancel-button:hover {
  transform: scale(1.03);
}

#add-button:active,
#ok-button:active,
#cancel-button:active {
  transform: translateY(3px) scale(.97);
}


/* Days/months tables */

.days-table,
.dates-table {
  border-collapse: separate;
  text-align: center;
}

.day {
  height: 26px;
  width: 26px;
  padding: 0 10px;
  line-height: 26px;
  border: 2px solid transparent;
  text-transform: uppercase;
  font-size: 90%;
  color: #9e9e9e;
}

.active-month {
  font-weight: bold;
  font-size: 14px;
  color: #FF1744;
  text-shadow: 0 1px 4px RGBA(255, 50, 120, .8);
}


/*  Dates table */

.table-date {
  cursor: default;
  color: #2b2b2b;
  height: 26px;
  width: 26px;
  font-size: 15px;
  padding: 10px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 250ms;
}

.table-date:not(.nil):hover {
  border-color: #FF1744;
  box-shadow: 0 2px 6px RGBA(255, 50, 120, .9);
}

.event-date {
  border-color: #52A0FD;
  box-shadow: 0 2px 8px RGBA(130, 180, 255, .9);
}

.active-date {
  background: #FF1744;
  box-shadow: 0 2px 8px RGBA(255, 50, 120, .9);
  color: #fff;
}

.event-date.active-date {

登錄后復(fù)制

以上就是從數(shù)據(jù)庫獲取數(shù)據(jù)并在日歷中顯示：完整教程的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)標(biāo)簽：