在全日历视图中动态更改 slotDuartion。当滑动滑块时

问题描述 投票：0回答：1

当我将滑块滑动到几个小时时，视图中的完整日历没有更改。

您遇到什么错误？ 不按照 slotduartion 更改全日历中的视图

当我将滑块滑动到几个小时（24 小时内）时，全日历应该通过调用该函数来更改视图。滑动滑块时，全日历的视图应该发生变化。 

var datetime = moment().format('YYYY-MM-DDTHH:mm:ss');
let today = new Date().toISOString().slice(0, 10);
var slotduartion = '';

document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        timeZone: 'UTC',
        slotMinTime: '06:00',
        slotMaxTime: '19:00',
        slotDuration: slotduartion,
        initialView: 'resourceTimelineDay',
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
        initialView: 'resourceTimelineWeek',
        height: 650,
        headerToolbar: {
            left: 'prev,next',
            center: 'title',
            right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
        },
        slotLabelFormat: { hour: 'numeric', minute: '2-digit', hour12: false },
        allDay: false,
        editable: true,
        resourceAreaHeaderContent: 'Manager',
        initialDate: today,
        businessHours: [ // specify an array instead
            {
                daysOfWeek: [0, 1, 2, 3, 4, 5, 6], // Monday, Tuesday, Wednesday
                startTime: '07:00', // 8am
                endTime: '18:00' // 6pm
            }

        ],

        resourceAreaWidth: '15%',
        resources: [
            { id: 'a', title: 'Employee 1' },
            { id: 'b', title: 'Employee 2' },
            { id: 'c', title: 'Employee 3' },
            { id: 'd', title: 'Employee 4' }
        ],
        events: [
            { title: 'Event 1', start: today + 'T07:30:00', end: today + 'T12:00:00', resourceId: 'a' },
            { title: 'Event 2', start: today + 'T09:30:00', end: today + 'T14:00:00', resourceId: 'b' },
            { title: 'Event 3', start: today + 'T08:30:00', end: today + 'T12:00:00', resourceId: 'c' },
            { title: 'Event 4', start: today + 'T10:30:00', end: today + 'T14:00:00', resourceId: 'd' }
        ]
    });
    calendar.render();
});

var value = 0;
var slider = document.getElementById("myRange");
var output = document.getElementById("displayValue");
var hours = Math.floor(slider.value / 60);
var minutes = slider.value % 60;
var seconds = minutes * 60;
var minuteOutput = $("#minutes")[0];
var hourOutput = $("#hours")[0];
var secondOutput = $("#seconds")[0];
var hours = Math.floor(slider.value / 60);
var minutes = slider.value % 60;
var seconds = minutes * 60;
hourOutput.innerHTML = hours;
minuteOutput.innerHTML = minutes;
secondOutput.innerHTML = seconds

$('.slider').change(function () {
    debugger;
    var hours = Math.floor(slider.value / 60);
    var minutes = slider.value % 60;
    var seconds = minutes * 60;
    hourOutput.innerHTML = hours;
    minuteOutput.innerHTML = minutes;
    secondOutput.innerHTML = seconds;
    slotduartion = hours + ':' + minutes + ':' + seconds;
calendar.setOption('locale', slotduartion);

});
a {
            color: var(--bs-link-color);
            text-decoration: none;
        }

        #storlekslider {
            width: 30%;
        }
<head>
         <meta charset='utf-8' />
<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
    <div class="slidecontainer">
        <h3 id="displayValue">
            <span id="hours">min</span> :
            <span id="minutes">hour</span>
            <span id="seconds" style="display:none;">second</span>
        </h3>
        <input type="range" min="1" max="1440" value="500" class="slider" id="myRange">
    </div>
    <br />
    <div id='calendar'></div>
</body>

javascript html fullcalendar
1个回答
0
投票

在事件外部声明日历变量，在滑块中引用该变量并使用 

setOption
更改值

var calendar = null;
// ...
document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');
    calendar = new FullCalendar.Calendar(calendarEl, {
        // options
    });
    calendar.render();
});
// ...
$('.slider').change(function () {
    // ...
    if(calendar) {
        calendar.setOption('slotDuration', slotduartion);
    }
});

我已添加更新的代码片段，请注意，我尚未修复创建 

duration object
的滑块功能。

var calendar = null;
var datetime = moment().format('YYYY-MM-DDTHH:mm:ss');
let today = new Date().toISOString().slice(0, 10);
var slotduartion = '';

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    slotMinTime: '06:00',
    slotMaxTime: '19:00',
    slotDuration: slotduartion,
    initialView: 'resourceTimelineDay',
    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
    initialView: 'resourceTimelineWeek',
    height: 650,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    slotLabelFormat: {
      hour: 'numeric',
      minute: '2-digit',
      hour12: false
    },
    allDay: false,
    editable: true,
    resourceAreaHeaderContent: 'Manager',
    initialDate: today,
    businessHours: [ // specify an array instead
      {
        daysOfWeek: [0, 1, 2, 3, 4, 5, 6], // Monday, Tuesday, Wednesday
        startTime: '07:00', // 8am
        endTime: '18:00' // 6pm
      }

    ],

    resourceAreaWidth: '15%',
    resources: [{
        id: 'a',
        title: 'Employee 1'
      },
      {
        id: 'b',
        title: 'Employee 2'
      },
      {
        id: 'c',
        title: 'Employee 3'
      },
      {
        id: 'd',
        title: 'Employee 4'
      }
    ],
    events: [{
        title: 'Event 1',
        start: today + 'T07:30:00',
        end: today + 'T12:00:00',
        resourceId: 'a'
      },
      {
        title: 'Event 2',
        start: today + 'T09:30:00',
        end: today + 'T14:00:00',
        resourceId: 'b'
      },
      {
        title: 'Event 3',
        start: today + 'T08:30:00',
        end: today + 'T12:00:00',
        resourceId: 'c'
      },
      {
        title: 'Event 4',
        start: today + 'T10:30:00',
        end: today + 'T14:00:00',
        resourceId: 'd'
      }
    ]
  });
  calendar.render();
});

var value = 0;
var slider = document.getElementById("myRange");
var output = document.getElementById("displayValue");
var hours = Math.floor(slider.value / 60);
var minutes = slider.value % 60;
var seconds = minutes * 60;
var minuteOutput = $("#minutes")[0];
var hourOutput = $("#hours")[0];
var secondOutput = $("#seconds")[0];
var hours = Math.floor(slider.value / 60);
var minutes = slider.value % 60;
var seconds = minutes * 60;
hourOutput.innerHTML = hours;
minuteOutput.innerHTML = minutes;
secondOutput.innerHTML = seconds

$('.slider').change(function() {
  debugger;
  var hours = Math.floor(slider.value / 60);
  var minutes = slider.value % 60;
  var seconds = minutes * 60;
  hourOutput.innerHTML = hours;
  minuteOutput.innerHTML = minutes;
  secondOutput.innerHTML = seconds;
  slotduartion = hours + ':' + minutes + ':' + seconds;
  if(calendar) {
    calendar.setOption('slotDuration', slotduartion);
  }
});
a {
  color: var(--bs-link-color);
  text-decoration: none;
}

#storlekslider {
  width: 30%;
}
<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="slidecontainer">
  <h3 id="displayValue">
    <span id="hours">min</span> :
    <span id="minutes">hour</span>
    <span id="seconds" style="display:none;">second</span>
  </h3>
  <input type="range" min="1" max="1440" value="500" class="slider" id="myRange">
</div>
<br />
<div id='calendar'></div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.