整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
歷是人類文明的重要工具之一。然后可以記住許多重要事件，并從事件的確切日期追溯到真相。
在本文中，我們將學(xué)習(xí)如何利用CSS Grid系統(tǒng)（最近在前端開發(fā)人員中流行的一種布局技術(shù)）來使用HTML和CSS設(shè)計(jì)日歷。以下是日歷的最終設(shè)計(jì)效果：
從圖片中我們可以看出日歷包含三個(gè)部分：月指標(biāo)；工作日/周末指標(biāo)；日期本身。
編寫HTML的最佳方法是遵循正確的感覺。現(xiàn)在，我們將根據(jù)以下三個(gè)部分創(chuàng)建HTML：
我們還應(yīng)該能夠看到日歷上網(wǎng)格的七個(gè)列的需求。
我們將重點(diǎn)放在上面的代碼.day-of-week和.date-grid上面的代碼上，因?yàn)楝F(xiàn)在我們只在談?wù)摼W(wǎng)格。
有兩種創(chuàng)建CSS Box的方法。第一種方法是在內(nèi)部組合元素.day-of-week并.date-grid 成為一個(gè)選擇器。如果要這樣做，我們可以安排display: grid。如果執(zhí)行此操作，HTML將是什么樣的：
我們應(yīng)該避免這種方法，因?yàn)镠TML失去了它的結(jié)構(gòu)意義，因?yàn)樗Y(jié)合起來，讓我們嘗試保存.day-of-week并date-grid 作為一個(gè)獨(dú)立的元素，如果可能的。因?yàn)檫@使得我們更容易閱讀/理解已經(jīng)寫入的代碼。這是最好的HTML結(jié)構(gòu)：
創(chuàng)建具有簡(jiǎn)單結(jié)構(gòu)的CSS網(wǎng)格的最佳方法是使用子網(wǎng)格。但是，大多數(shù)瀏覽器尚不支持子網(wǎng)格。同時(shí)，最好的辦法就是讓兩個(gè)獨(dú)立的電網(wǎng)，一個(gè)是.day-of-week和一個(gè).date-grid。因此，它可以解釋.day-of-week并.date-grid可以使用相同的七個(gè)柱網(wǎng)。
2019年2月從星期五開始。如果我們希望日歷正確無誤，則需要確保：2019年2月1日為星期五；2019年2月2日為星期六；2019年2月3日是星期日等等...
使用CSS Grid，可以簡(jiǎn)化這一部分。
CSS Grid的放置算法在某種程度上遵循以下規(guī)則（如果我們未將其設(shè)置grid-auto-flow為dense）：放置具有顯式grid-column或grid-row第一位的項(xiàng)目；根據(jù)最后放置的項(xiàng)目填寫其余部分
這表示：如果第一項(xiàng)屬于第6列；第二項(xiàng)將放置在第7列中。；第三項(xiàng)將放置在第一行的下一行中（因?yàn)橹挥衅吡校坏谒捻?xiàng)將放置在第2列中等等...
因此，如果我們將2月1日放置在第六列（星期五），則其余日期將正確放置。像這樣的簡(jiǎn)單邏輯...
今每個(gè)人的事情都變的越來越多了，沒有一個(gè)好的提醒工具，你會(huì)不會(huì)錯(cuò)過很多，比如：交房貸、追劇、看球等等，我們知道手機(jī)上的日歷，時(shí)鐘，都能提醒我們，可是作為程序員的我們，是不是也該嘗試一下，弄一個(gè)日歷處理？
首先明確，我們需要什么功能：通過日歷來展示我們的待辦事項(xiàng)？
如果從頭寫，是不是有點(diǎn)費(fèi)時(shí)？這里，我們推薦一個(gè)jQuery插件：FullCalendar
我們先目的一下它的風(fēng)采吧。
首先，F(xiàn)ullCalendar最大的特點(diǎn)是，可以全日歷上拖放的，比如：我5月19號(hào)添加的備忘，可以拖放到5月31號(hào)上。添加的備忘事件還可以跨好幾天來拖放，真的很方便。
那么FullCalendar是什么？
嚴(yán)格的說，它是一個(gè)開源的，并可定制的JavaScript事件日歷，支持全尺寸拖放。
這里有個(gè)比較重要的聲明：它是一個(gè)很好的活動(dòng)展示庫，不是一個(gè)完整的事件管理解決方案，就是說不能修改活動(dòng)事件的名稱。你需要通過它的JS函數(shù)和配置等來設(shè)置。
那么如何獲取它？
你可以通過github來搜索FullCalendar，它也有官網(wǎng)可以查看各種示例（當(dāng)然也包括Google日歷的Style）
那么它的兼容性如何？
它支持Firefox、Chrome、Safari、IE9+等所有現(xiàn)代瀏覽器。它依賴于jQuery 2.0.0+、Moment 2.9.0+（這是一個(gè)對(duì)日歷和時(shí)間進(jìn)行解析、驗(yàn)證、操作、顯示的js庫）
那么如何使用它呢？
通過上圖的Head部分引用，Script，Html，就可以完成一個(gè)日歷的展示了。
至此，這個(gè)開源的日歷庫就介紹完了，如果工作中有需要，它是個(gè)不錯(cuò)的選擇。看文章累了嗎？來張圖片養(yǎng)養(yǎng)眼？（圖片來源網(wǎng)絡(luò)，如有侵權(quán)請(qǐng)告知。）
圖片來自網(wǎng)絡(luò)，如有侵權(quán)請(qǐng)告知，我們會(huì)盡快刪除。謝謝。
果圖：
方案描述：
開發(fā)工具：Hbuilder X（html + javasc）
代碼（html文件）：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
