JqxScheduler 自定义对话框

Question

我想自定义jqx调度器对话框标题中的对话框。而不是“创建新约会”，我想显示“创建新的业务时间表”。 我使用 python django，所以在代码中有一些来自 django 模板代码的元素。到目前为止，我使用 ajax 和 django 作为后端创建、编辑、删除约会。

     var items;

    function setAvailability(price_data,persons_data,start_date,end_date, id, a_type, description){
      availability_data = {
        pk : "{{form.instance.pk}}",
        csrfmiddlewaretoken: "{{ csrf_token }}",
        price:price_data,
        persons:persons_data,
        from_date:start_date,
        to_date:end_date,
        a_type_data:a_type,
        av_description:description
      }
      if(id) {
        availability_data['event'] = id;
      }

      $.ajax({
        url: "{% url 'set-availability' %}",
        method: "POST",
        data: availability_data,
        dataType: "json",
        success: function(response){
          var source = {
              datatype: "json",
              dataFields: [
                  { name: 'id', type: 'integer' },
                  { name: 'description', type: 'string' },
                  { name: 'location', type: 'string' },
                  { name: 'status', type: 'string' },
                  { name: 'price', type: 'number' },
                  { name: 'persons', type: 'number' },
                  { name: 'subject', type: 'integer' },
                  { name: 'start', type: 'date', format: "yyyy-MM-dd"},
                  { name: 'end', type: 'date', format: "yyyy-MM-dd"}
              ],
              id: 'id',
              url: "{% url 'get-availability' %}?pk={{form.instance.pk}}"
          };
          var adapter = new $.jqx.dataAdapter(source);
          $("#scheduler").jqxScheduler({
            source: adapter
          })
          return response;
        }
      })
    }

    $.ajax({
      url: "{% url 'get-availability' %}",
      method: "GET",
      data: { pk : "{{form.instance.pk}}" },
      dataType: "json",
      success: function(response){
        items = response;
        var source = {
            datatype: "array",
            dataFields: [
                { name: 'id', type: 'integer' },
                { name: 'description', type: 'string' },
                { name: 'location', type: 'string' },
                { name: 'status', type: 'string' },
                { name: 'price', type: 'number' },
                { name: 'persons', type: 'number' },
                { name: 'subject', type: 'integer' },
                { name: 'start', type: 'date', format: "yyyy-MM-dd"},
                { name: 'end', type: 'date', format: "yyyy-MM-dd"}
            ],
            id: 'id',
            localData: items
        };
        var adapter = new $.jqx.dataAdapter(source);
        $("#scheduler").jqxScheduler({
            date: new $.jqx.date(2018, 02, 01),
            width: 850,
            height: 600,
            source: adapter,
            editDialogDateTimeFormatString: 'yyyy-MM-dd',
            editDialogDateFormatString: 'yyyy-MM-dd',
            showLegend: false,
            localization: { editDialogStatuses: {
                available: "Available",
              booked: "Booked"
            }},
            renderAppointment: function(data)
            {
              if (data.appointment.status == "available") {
                    data.style = "#B8E6A3";
              }
              else if (data.appointment.status == "booked") {
                data.style = "#FF0013";
              }
              return data;
            },
            ready: function () {
                $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
            },
            resources:
            {
                colorScheme: "scheme05",
                dataField: "id",
                source:  new $.jqx.dataAdapter(source)
            },

            appointmentDataFields:
            {
              id: "id",
              description: "description",
              location: "location",
              subject: "subject",
              price: "price",
              persons: "persons",
              status: "status",
              calendar: 'calendar',
              from: "start",
              to: "end",
            },
            view: 'monthView',
            views:
            [
                'monthView'
            ],
            renderAppointment: function (dialog, fields, renderAppointment) {
              console.info('render appointment:', dialog);
            },
            editDialogCreate: function (dialog, fields, editAppointment) {
              fields.repeatContainer.hide();
              fields.subjectContainer.hide();
              fields.timeZoneContainer.hide();
              fields.colorContainer.hide();
              fields.resourceContainer.hide();
              fields.allDayContainer.hide();
              fields.locationContainer.hide();
              fields.fromContainer.hide();
              fields.toContainer.hide();
              fields.fromLabel.html("Start");
              fields.toLabel.html("End");
              var priceField = ''
              var personsField = ""
              priceField += "<div>"
              priceField += "<div class='jqx-scheduler-edit-dialog-label'>Price</div>"
              priceField += "<div class='jqx-scheduler-edit-dialog-field'><input type='number' id='price' step='0.01' /></div>"
              priceField += "</div>"
              personsField += "<div>"
              personsField += "<div class='jqx-scheduler-edit-dialog-label'>Persons</div>"
              personsField += "<div class='jqx-scheduler-edit-dialog-field'><input type='number' id='persons' /></div>"
              personsField += "</div>"

              var i = 0;

              $('#dialogscheduler').children('div').each(function () { // loop trough the div's (only first level childs) elements in dialogscheduler
                  i += 1;
                  if (i == 2) { // places the field in the third position.
                  $(this).after(priceField);
                  $(this).after(personsField);
                  };
              });
            },
            editDialogOpen: function (dialog, fields, editAppointment) {
              console.info(dialog);
              fields.repeatContainer.hide();

            }
        });
        $('#scheduler').on('editDialogOpen', function (event) {

          var args = event.args;
          var appointment = args.appointment;
          if(appointment){
            $('#dialogscheduler > div').find('#price').val(appointment.price);
            $('#dialogscheduler > div').find('#persons').val(appointment.persons);
          }
          else {
            $('#dialogscheduler > div').find('#price').val(0);
            $('#dialogscheduler > div').find('#persons').val(0);
            $('#dialogscheduler > div').find('#from').val('');
            $('#dialogscheduler > div').find('#to').val('');
            $('#dialogscheduler > div').find('#description').val('');
            $('#dialogscheduler > div').find('#status').val();
          }
        });
        $('#scheduler').on('appointmentAdd', function (event) {
            var price_data = $('#dialogscheduler > div').find('#price').val();
            var persons_data = $('#dialogscheduler > div').find('#persons').val();
            var a_type = event.args.appointment.status;
            var description = event.args.appointment.description;
            var start_date = event.args.appointment.from.toString();
            var id = null;
            var end_date = event.args.appointment.to.toString();
            var availability = setAvailability(price_data,persons_data,start_date,end_date,id, a_type, description);
          });
        $('#scheduler').on('appointmentDelete', function (event) {
            var id = event.args.appointment.id;
            deleteEvent(id);
          });
        $('#scheduler').on('appointmentChange', function (event) {
            var id = event.args.appointment.id;
            var price_data = $('#dialogscheduler > div').find('#price').val();
            var persons_data = $('#dialogscheduler > div').find('#persons').val();
            var description = event.args.appointment.description;
            var a_type = event.args.appointment.status;
            var start_date = event.args.appointment.from.toString();
            alert(start_date);
            var end_date = event.args.appointment.to.toString();
            var availability = setAvailability(price_data,persons_data,start_date,end_date,id, a_type,description);

        });
      }
    })

    function deleteEvent(pk) {
        $.ajax({
          url: "{% url 'delete-availability' %}",
          method: "GET",
          data: { pk : pk, business_pk:'{{form.instance.pk}}'},
          dataType: "json",
          success: function(response){
            console.info(response)
          }
        })
    }

Answer 1

我认为您需要将以下代码 sn-p 放入 editDialogOpen() 函数中。这对我有用。

setTimeout(function() {
    dialogRef.find("div").first().find("div").first().html("Create a new business schedule");
}, 10);

Answer 2

您可以使用localization 来执行此操作。我在 Angular 中使用 jqxScheduler，所以：

1. 将[localization]="localization" 添加到组件定义中，如下所示：

2. 在组件类中添加localization 属性。 jqxScheduler 有不同的标题用于创建和编辑约会：

   本地化 = { editDialogTitleString: '编辑业务时间表', editDialogCreateTitleString: '创建一个新的业务计划' };

jQWidgets 有其他语言的实现示例。 JQuery here.