Как сделать так, чтобы пользователь мог добавлять рабочие часы в Full Calendar со стороны клиента?

Question

Я искал решение для полного календаря, чтобы добавить возможность добавления рабочего времени самим клиентом. В настоящее время я нашел и внедрил только жестко запрограммированную версию на полной стороне календаря.

selectConstraint: 'businessHours',
    eventConstraint: 'businessHours',
    businessHours: [
        {
            dow: [1, 2, 3], // Monday, Tuesday, Wednesday
            start: '09:00',
            end: '18:00'
        },
        {
            dow: [4, 5], // Thursday, Friday
            start: '09:00',
            end: '18:00'
        }
    ],

В календаре все выглядит так, но это жестко запрограммированная версия, без возможности добавления или редактирования пользователем на стороне клиента. .

Может быть, посоветуете некоторые внешние библиотеки с настройкой расписания в рабочее время в полном календаре.

Answer 1

Вы можете добавить поля ввода в html, а затем связать значения полей с переменными, например: html

 <label for="startHour1">start hour: </label><br />
          <input type="text" id="startHour1" name="startHour1" /><br />
 <label for="endHour1">end hour: </label><br />
          <input type="text" id="endHour1" name="endHour1" /><br />

Javascript

var starthour = document.getElementById("startHour").value;

selectConstraint: 'businessHours',
    eventConstraint: 'businessHours',
    businessHours: [
        {
            dow: [1, 2, 3], // Monday, Tuesday, Wednesday
            start: starthour1 ,
            end: endhour1 
         },
        {
            dow: [4, 5], // Thursday, Friday
            start: starthour2 ,
            end: endhour2 
        }
    ],

Надеюсь, что это поможет!