0

我试图在 Fomantic Calendar Widget 中显示接下来的 30 天。此外，我只使用 Fomantic 的日历小部件，而其他使用语义 ui。不幸的是，它只显示当前月份。

到目前为止，这就是我实现它的方式：

...
<head>
        <link rel="stylesheet" type="text/css" href="/static/semantic/semantic.min.css">
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="/static/semantic/semantic.min.js"></script>
        <link rel="stylesheet" type="text/css" href="/static/semantic/floating.css">
        <link rel="stylesheet" type="text/css" href="/static/semantic/components/calendar.css">
</head>
<body>
 ...
  <div class="ui calendar" id="inline_calendar">
  </div>

JS是：

<script>
            var today = new Date();

            $(document).ready(function(){
                $('#inline_calendar').calendar(
                    {
                        minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
                        maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 14),
                        disabledDaysOfWeek: [7],
                        type: 'date',
                        multiMonth: true,
                        ampm: false,
                        formatter: {
                          date: function (date, settings) {
                            if (!date) return '';
                            var day = date.getDate();
                            var month = date.getMonth() + 1;
                            var year = date.getFullYear();
                            return 'slot/' + year + '/' + month + '/' + day + '/';
                          }
                        },
                        onChange: function (date, text) {
                            var newValue = text;
                            window.location.replace('/booking/'+newValue)
                        },
                    }
                );

            });
        </script>
  <script src="/semantic/components/calendar.js"></script>

这将导致以下结果，而不是显示接下来的 30 天： 在此处输入图像描述

4

0 回答 0