前言

成都創(chuàng)新互聯(lián)專(zhuān)注于永新企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城系統(tǒng)網(wǎng)站開(kāi)發(fā)。永新網(wǎng)站建設(shè)公司,為永新等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站建設(shè)，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

本文給大家介紹了Javascript開(kāi)發(fā)二維周視圖日歷的相關(guān)內(nèi)容，即之前實(shí)現(xiàn)了一個(gè)月視圖日歷，我們今天來(lái)實(shí)現(xiàn)一個(gè)二維周視圖的日歷。

以下進(jìn)行分析其中的關(guān)鍵部分。

結(jié)構(gòu)準(zhǔn)備

不同之處在于其在日歷的基礎(chǔ)上還有一個(gè)分類(lèi)軸，用于展示不同的類(lèi)目，主要用于一周內(nèi)的日程安排、會(huì)議安排等。

二維則和之前單獨(dú)的有所不同，二維日歷再切換日期時(shí)不用全部重新渲染，分類(lèi)是不用變的，僅僅改變顯示的日期即可。

而且由于是二維的，插入的內(nèi)容必定是同時(shí)屬于一個(gè)分類(lèi)和一個(gè)時(shí)間段的，內(nèi)容肯定是可以跨越時(shí)間(即日期軸)的，因此不能直接將插入的內(nèi)容像開(kāi)始的日歷一樣直接放置在日歷的格子中。而要進(jìn)行單獨(dú)的處理。

另外，只要分類(lèi)不變，日期和分類(lèi)構(gòu)成的網(wǎng)格是不用重繪的。

考慮到以上情況，插入內(nèi)容的和網(wǎng)格是需要分開(kāi)來(lái)的，我將現(xiàn)成的日歷弄成一下3D效果示意:

即插入內(nèi)容的層是單獨(dú)放置在時(shí)間和分類(lèi)構(gòu)成的網(wǎng)格上方的。

基于以上分析，先構(gòu)建如下基本結(jié)構(gòu):

<div class="ep-weekcalendar border">
 <!-- 頭部 -->
 <div class="ep-weekcalendar-header">
 <div class="ep-weekcalendar-header-left"></div>
 <div class="ep-weekcalendar-header-center">
 <span class="ep-weekcalendar-header-btn ep-weekcalendar-header-btn-prev"></span>
 <span class="ep-weekcalendar-title">2017年12月04日 - 10日</span>
 <span class="ep-weekcalendar-header-btn ep-weekcalendar-header-btn-next"></span>
 </div>
 <div class="ep-weekcalendar-header-right"></div>
 </div>
 <!-- 主體 -->
 <div class="ep-weekcalendar-body">
 <!-- 分類(lèi)區(qū)域 -->
 <div class="ep-weekcalendar-category-area">
 <div class="ep-weekcalendar-category-header">
 <span class="ep-weekcalendar-category-title">車(chē)輛</span>
 </div>
 <ul class="ep-weekcalendar-category-list">
 </ul>
 </div>
 <!-- 內(nèi)容區(qū)域 -->
 <div class="ep-weekcalendar-time-area">
 <!-- 每周日期渲染區(qū)域。切換日期時(shí)重新繪制內(nèi)容 -->
 <div class="ep-weekcalendar-weeks"></div>
 <div class="ep-weekcalendar-main">
 <!-- 分類(lèi)和內(nèi)容構(gòu)建的網(wǎng)格區(qū)域，僅在分類(lèi)改變時(shí)進(jìn)行調(diào)整 -->
 <div class="ep-weekcalendar-grid"> </div>
 <!-- 可插入任意內(nèi)容的區(qū)域，日期切換時(shí)清空，根據(jù)使用需求插入內(nèi)容 -->
 <div class="ep-weekcalendar-content"></div>
 </div>
 </div>
 </div>
 <!-- 底部 -->
 <div class="ep-weekcalendar-body"></div>
</div>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

分享標(biāo)題：利用Javascript開(kāi)發(fā)一個(gè)二維周視圖日歷-創(chuàng)新互聯(lián)
標(biāo)題URL：http://www.chinadenli.net/article26/dhesjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、關(guān)鍵詞優(yōu)化、ChatGPT、商城網(wǎng)站、定制開(kāi)發(fā)、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)