創建一個可調整大小的日曆（html/css/jquery）

我會盡量讓它儘可能清晰！所以在這裏！創建一個可調整大小的日曆（html/css/jquery）

我一直在與Adam Shaw的jquery插件fullCalendar合作。我對我正在進行的項目進行了微小的調整。

目的：這fullcalendar的「版本」設置，使其充滿窗口中的文件空間，並打算一直留可見，當窗口大小（同時使填充的10px的窗口和之間日曆本身在右側側和底部）。另外它應該有10px的填充文件頂部的下的的日曆導航。左側是正確的。

問題：當您加載zip中包含的'localendar.html'時，您可能會看到一些即時問題（這可能取決於您的屏幕分辨率）。目前日曆在日曆導航下面10px處不固定。 此外，當您調整瀏覽器窗口的大小時，日曆會在右側和底側保留10px的填充，但日曆頂部在所有三個日曆視圖選項中根本無法按要求運行。日曆不得有任何溢出，導致滾動條出現。

日曆必須在所有邊上保持10像素的填充（除了左側，日曆導航下面的頂部只有10px）。最小高度和寬度，以便日曆不能小於平均上網本分辨率（在此點溢出導致滾動條可以接受）。

- 這些行可能會有所幫助。

localendar.html（70-92，104-124）
fullcalendar.css（139-142 [視圖fullcalendar.css）
fullcalendar.js（473-492 [視圖fullcalendar.js）

來源

2012-04-11 captainrad

你不能在JSFiddle上託管它嗎？ – Ivan 2012-04-13 20:28:06

添加了更好的來源！讓我知道這是否會奏效。 – captainrad 2012-04-13 22:05:18

爲了清楚你要問什麼，你想讓別人爲你解決這個問題？ – jfriend00 2012-04-13 22:49:39

您將所有元素的位置屬性設置爲「絕對」。當您將某些內容設置爲'position：absolute'時，它將它絕對放置在最接近的設置爲'position：relative'的父級內。它也從通用文檔流中刪除元素。上邊距發生的事情是，由於日曆不在文檔流中，因此它與上面的控件重疊。您應該從CSS中移除位置屬性。

這是你應該在HTML頁面本身的日曆樣式是什麼：

div#calendar { 
    margin-left: 252px !important; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

我包括樣式屬性的div元素，因爲它給人的規則更多的重量。我還將「margin-left」屬性的值設置爲重要的，因爲在fullcalendar.css文件中有另一種設置爲重要的樣式。這兩者一起將覆蓋在該文件中應用的左邊距。

我現在只能在safari中測試它，但它應該在大多數瀏覽器中正常工作。請讓我知道這可不可以幫你。

來源

2012-04-13 23:23:22

感謝您的幫助！ – captainrad 2012-04-15 03:54:04

創建一個可調整大小的日曆（html/css/jquery）

回答

相關問題