嵌入月曆應用程式
要將月曆嵌進應用程式裏，只需將月曆包在一個div區塊裏，如下圖：(把原本獨立存在時設置的CSS-body改以calendar_main來對月曆進行設定)
我們將原本在月曆下的calendar所有的css檔案、images檔案、與js檔案分別放入css/calendar、images/calendar與js/calendar下：
在header.php中的<head> </head>中加入原本calendar所連結的自訂css檔案：
<link rel="stylesheet" href="css/calendar/main.css"> <link rel="stylesheet" href="css/calendar/current_day.css"> <link rel="stylesheet" href="css/calendar/calendar.css"> <link rel="stylesheet" href="css/calendar/calendar_border.css"> <link rel="stylesheet" href="css/calendar/modal.css"> <link rel="stylesheet" href="css/calendar/portrait.css">
將原本body元素css設定改為calendar_main (包住月曆div區塊)：
.calendar_main {
font-family: 'Josefin Sans', sans-serif;
margin: 0;
background-color: #FEFDFD;
display : flex;;
align-items: stretch;
}
基本上，在一個Bootstrap下的區塊應該不去定義html的body元素css設定，因為這是全域式的CSS設定，一旦設定會影響到整個應用程式(干擾到Bootstrap的設定)，應該以自己所在的div區塊定義自己的類別css設定(或ID的CSS屬性。)
將月曆的檔案index.php改成calendar.php，好跟原本的首頁下的index.php區別開來！
在嵌入的過程，遇到較大的問題是先前設計的tootip類別屬性，原本月曆app自行設計的tooltip類別屬性在Bootstrap下無法顯示，因此改用Bootstrap的tooltip：
//記事圖示與ToolTip處理
function appendSpriteToCellAndTooltip(uid, elem){
for(let i = 0; i < postIts.length; i++){
if(uid == postIts[i].id){
elem.innerHTML += `<img src='images/calendar/note${postIts[i].note_num}.png' alt='A post-it note'>`;
// elem.classList.add("tooltip");
elem.setAttribute("data-toggle","tooltip"); //Use Bootstrap tooltip
elem.setAttribute("title", postIts[i].note);
// elem.innerHTML += `<span>${postIts[i].note}</span>`;
// console.log(elem.innerHTML)
console.log(elem)
}
}
}
註：請將原本月曆的tooltip類別CSS設置刪去(或註解掉)。
另外，月曆表格上的年份標題，未置中對齊，h4元素標籤設置css，加上 text-align: center;
#calendar h4 {
margin: 0;
padding: 0.0vh 0 0.2vh;
font-size: 1.4vw;
font-weight: 300;
text-align: center;
}
左邊月曆日期序數詞上標CSS設定需要變更：
sup {
vertical-align: super;
font-size: 50%;
}
在導覽列加上月曆的超連結，將月曆完美地嵌入我們設計的Web應 用程式： (目前的程式：calendar.php)
這樣的作法提供了一個各位在發展應用程式裏，將分配到的應用程式模組寫好，再整合嵌入提供一個完美的例子。
註：將導覽列置頂/固定在網頁頂端：
<nav class="navbar navbar-expand-md fixed-top" id="navbar">