JqxScheduler 自定义对话框
Posted
技术标签:
【中文标题】JqxScheduler 自定义对话框【英文标题】：JqxScheduler Customization dialog 【发布时间】：2018-08-30 18:06:24 【问题描述】：我想自定义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)
)
【问题讨论】：
【参考方案1】：我认为您需要将以下代码 sn-p 放入 editDialogOpen() 函数中。这对我有用。
setTimeout(function()
dialogRef.find("div").first().find("div").first().html("Create a new business schedule");
, 10);
【讨论】：
【参考方案2】：您可以使用localization 来执行此操作。我在 Angular 中使用 jqxScheduler，所以：
将[localization]="localization" 添加到组件定义中，如下所示：
在组件类中添加localization 属性。 jqxScheduler 有不同的标题用于创建和编辑约会：
本地化 = editDialogTitleString: '编辑业务时间表', editDialogCreateTitleString: '创建一个新的业务计划' ;
jQWidgets 有其他语言的实现示例。 JQuery here.
【讨论】：
以上是关于JqxScheduler 自定义对话框的主要内容，如果未能解决你的问题，请参考以下文章