创建一个可调整大小的日历(html/css/jquery)



我会尽量把这句话说清楚!所以来了!

我一直在使用Adam Shaw的jquery插件fullCalendar。我对我正在从事的项目进行了细微的调整。

目的:设置完整日历的这个"版本",以便它填充窗口中的文档空间,并且打算在调整窗口大小时始终保持可见(同时在窗口和日历本身之间保留 10px 的填充在右侧底部)。此外,它还应该在日历导航下方的文档顶部有 10px 的填充。左侧是正确的。

问题:当您加载zip中包含的"localendar.html"时,您可能会看到一些直接的问题(这可能取决于您的屏幕分辨率)。目前,日历不固定在日历导航下方 10px 处。此外,当您调整浏览器窗口的大小时,日历会在右侧和底部保持 10px 填充,但是日历的顶部在所有三个日历视图选项中都无法按预期运行。日历不得有任何溢出导致滚动条出现。

日历必须在所有边保持 10px 的填充(除了左侧,日历导航下方的顶部只有 10px)。最小高度和宽度,以便日历不能小于平均上网本分辨率(此时溢出导致滚动条是可以接受的)。

-这些行可能会有所帮助。

洛日历.html (70-92, 104-124)
完整日历.css (139-142 [查看完整日历.css)
完整日历.js (473-492 [查看完整日历.js)

您将元素的所有位置属性设置为"绝对"。当您将某些内容设置为"位置:绝对"时,它会将其绝对定位在设置为"位置:相对"的最近父级中。它还会从常规文档流中删除元素。上边距的情况是,由于日历不在文档流中,因此它与上面的控件重叠。您应该从 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 元素,因为它赋予规则更多的权重。我还将"左边距"属性的值设置为重要,因为在 fullcalendar.css 文件中还有另一种样式设置为重要。这两个一起将覆盖该文件中应用的左边距。

我现在只能在 safari 中对此进行测试,但它应该在大多数浏览器中正常工作。如果这有帮助,请告诉我。

相关内容

  • 没有找到相关文章

最新更新