<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn3.devexpress.com/jslib/22.1.6/js/dx.all.js"></script>
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.1.6/css/dx.common.css">
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.1.6/css/dx.light.css">
<div class="dx-viewport cal-container" id="month-data">
<div id="scheduler"></div>
<div class="options">
<div class="caption">Filter Events:</div>
<div class="option">
<div id="resources-selector"></div>
</div>
</div>
</div>
<div class="back">
<a href="{{ request.path }}" class="back-cal"><svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" aria-hidden="true"><g id="chevron-left1_layer"><path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></g></svg>
Back to Calendar</a>
</div>
<div class="dx-viewport tree-container" id="tree-data">
<div id="tasks"></div>
</div>
<script>
/*$(() => {
const scheduler = $('#scheduler').dxScheduler({
timeZone: 'America/Los_Angeles',
dataSource: data,
views: ['month'],
currentView: 'month',
currentDate: new Date(2021, 1, 1),
startDayHour: 9,
endDayHour: 19,
resources: [
{
fieldExpr: 'roomId',
dataSource: rooms,
label: 'Room',
}, {
fieldExpr: 'priorityId',
dataSource: priorities,
label: 'Priority',
}, {
fieldExpr: 'assigneeId',
allowMultiple: true,
dataSource: assignees,
label: 'Assignee',
}],
height: 600,
}).dxScheduler('instance');
$('#resources-selector').dxRadioGroup({
items: resourcesList,
value: resourcesList[0],
layout: 'horizontal',
onValueChanged(e) {
const resources = scheduler.option('resources');
for (let i = 0; i < resources.length; i += 1) {
resources[i].useColorAsDefault = resources[i].label === e.value;
}
scheduler.repaint();
},
});
});
const resourcesList = ['Assignee', 'Room', 'Priority'];
const data = [
{
text: 'Website Re-Design Plan',
assigneeId: 4,
roomId: 1,
priorityId: [2],
startDate: new Date('2021-04-26T16:30:00.000Z'),
endDate: new Date('2021-04-26T18:30:00.000Z'),
}, {
text: 'Book Flights to San Fran for Sales Trip',
assigneeId: 2,
roomId: 2,
priorityId: [1],
startDate: new Date('2021-04-26T19:00:00.000Z'),
endDate: new Date('2021-04-26T20:00:00.000Z'),
allDay: true,
}, {
text: 'Install New Router in Dev Room',
assigneeId: 1,
roomId: 1,
priorityId: [2],
startDate: new Date('2021-04-26T21:30:00.000Z'),
endDate: new Date('2021-04-26T22:30:00.000Z'),
}, {
text: 'Approve Personal Computer Upgrade Plan',
assigneeId: 3,
roomId: 2,
priorityId: [2],
startDate: new Date('2021-04-27T17:00:00.000Z'),
endDate: new Date('2021-04-27T18:00:00.000Z'),
}, {
text: 'Final Budget Review',
assigneeId: 1,
roomId: 1,
priorityId: [1],
startDate: new Date('2021-04-27T19:00:00.000Z'),
endDate: new Date('2021-04-27T20:35:00.000Z'),
}, {
text: 'New Brochures',
assigneeId: 4,
roomId: 3,
priorityId: [2],
startDate: new Date('2021-04-27T21:30:00.000Z'),
endDate: new Date('2021-04-27T22:45:00.000Z'),
}, {
text: 'Install New Database',
assigneeId: 2,
roomId: 3,
priorityId: [1],
startDate: new Date('2021-04-28T16:45:00.000Z'),
endDate: new Date('2021-04-28T18:15:00.000Z'),
}, {
text: 'Approve New Online Marketing Strategy',
assigneeId: 4,
roomId: 2,
priorityId: [1],
startDate: new Date('2021-04-28T19:00:00.000Z'),
endDate: new Date('2021-04-28T21:00:00.000Z'),
}, {
text: 'Upgrade Personal Computers',
assigneeId: 2,
roomId: 2,
priorityId: [2],
startDate: new Date('2021-04-28T22:15:00.000Z'),
endDate: new Date('2021-04-28T23:30:00.000Z'),
}, {
text: 'Customer Workshop',
assigneeId: 3,
roomId: 3,
priorityId: [1],
startDate: new Date('2021-04-29T18:00:00.000Z'),
endDate: new Date('2021-04-29T19:00:00.000Z'),
allDay: true,
}, {
text: 'Prepare 2021 Marketing Plan',
assigneeId: 1,
roomId: 1,
priorityId: [2],
startDate: new Date('2021-04-29T18:00:00.000Z'),
endDate: new Date('2021-04-29T20:30:00.000Z'),
}, {
text: 'Brochure Design Review',
assigneeId: 4,
roomId: 1,
priorityId: [1],
startDate: new Date('2021-04-29T21:00:00.000Z'),
endDate: new Date('2021-04-29T22:30:00.000Z'),
}, {
text: 'Create Icons for Website',
assigneeId: 3,
roomId: 3,
priorityId: [1],
startDate: new Date('2021-04-30T17:00:00.000Z'),
endDate: new Date('2021-04-30T18:30:00.000Z'),
}, {
text: 'Upgrade Server Hardware',
assigneeId: 4,
roomId: 2,
priorityId: [2],
startDate: new Date('2021-04-30T21:30:00.000Z'),
endDate: new Date('2021-04-30T23:00:00.000Z'),
}, {
text: 'Submit New Website Design',
assigneeId: 1,
roomId: 1,
priorityId: [2],
startDate: new Date('2021-04-30T23:30:00.000Z'),
endDate: new Date('2021-05-01T01:00:00.000Z'),
}, {
text: 'Launch New Website',
assigneeId: 2,
roomId: 3,
priorityId: [1],
startDate: new Date('2021-04-30T19:20:00.000Z'),
endDate: new Date('2021-04-30T21:00:00.000Z'),
},
];
const assignees = [
{
text: 'Samantha Bright',
id: 1,
color: '#727bd2',
}, {
text: 'John Heart',
id: 2,
color: '#32c9ed',
}, {
text: 'Todd Hoffman',
id: 3,
color: '#2a7ee4',
}, {
text: 'Sandra Johnson',
id: 4,
color: '#7b49d3',
},
];
const rooms = [
{
text: 'Room 1',
id: 1,
color: '#00af2c',
}, {
text: 'Room 2',
id: 2,
color: '#56ca85',
}, {
text: 'Room 3',
id: 3,
color: '#8ecd3c',
},
];
const priorities = [
{
text: 'High',
id: 1,
color: '#cc5c53',
}, {
text: 'Low',
id: 2,
color: '#ff9747',
},
];
function OnHyperLinkClicked(dateString) {
clientScheduler.PerformCallback(dateString);
} */
$(() => {
const scheduler = $('#scheduler').dxScheduler({
timeZone: 'America/Los_Angeles',
dataSource: data,
views: [ 'month'],
currentView: 'month',
currentDate: new Date(),
startDayHour: 9,
endDayHour: 19,
editing: {
allowUpdating: false,
allowAdding: false,
},
//groups: ["function_venue"],
resources: [
{
fieldExpr: 'function_venue',
dataSource: function_venue,
label: 'Event Venue',
}, {
fieldExpr: 'event_statusId',
dataSource: event_status,
label: 'Status',
}],
height: 600,
onAppointmentClick(e) {
//var text = e.targetedAppointmentData.text;
var date = e.targetedAppointmentData.startDate;
var evnt_name = e.targetedAppointmentData.function_venue;
//console.log('redirect to editAppointment/' + text);
//console.log(date+' '+evnt_name);
new_url = '?time='+date+'&event='+evnt_name;
window.location.href = window.location.href+new_url;
e.cancel = true;
},
onAppointmentDblClick: function(e) {
//var text = e.targetedAppointmentData.text;
var date = e.targetedAppointmentData.startDate;
var evnt_name = e.targetedAppointmentData.function_venue;
//console.log('redirect to editAppointment/' + text);
//console.log(date+' '+evnt_name);
new_url = '?time='+date+'&event='+evnt_name;
window.location.href = window.location.href+new_url;
e.cancel = true;
},
onCellClick: function(e) {
if (e.event.isDefaultPrevented()) {
return true
}
// e.event.preventDefault()
// get_cell_date = e.cellData.startDate.toISOString();
// new_url = '?time='+get_cell_date+'&event=All';
// window.location.href = window.location.href+new_url;
e.cancel = true;
},
onAppointmentTooltipShowing : function(e) {
get_cell_date = e.appointments['0'].appointmentData.startDate;
new_url = '?time='+get_cell_date+'&event=All';
window.location.href = window.location.href+new_url;
e.cancel = true;
},
}).dxScheduler('instance');
// var selectbox = $("#selectbox").dxSelectBox({
// dataSource: function_venue,
// displayExpr: "text",
// onValueChanged: function(e){
// console.log(function_venue.find(ele=>ele.id == e.value.id));
// scheduler.option("resources[0].dataSource", [function_venue.find(ele=>ele.id == e.value.id)])
// }
// }).dxSelectBox("instance");
$('#resources-selector').dxRadioGroup({
items: resourcesList,
value: resourcesList[0],
layout: 'horizontal',
onValueChanged(e) {
const resources = scheduler.option('resources');
for (let i = 0; i < resources.length; i += 1) {
resources[i].useColorAsDefault = resources[i].label === e.value;
}
scheduler.repaint();
},
});
});
const resourcesList = ['Status', 'Event Venue'];
const data = [
{% for row in hubdb_table_rows(5570711, '') %}
{
text: " {{ row.name }}",
startDate: new Date('{{ row.start_date|datetimeformat('%Y-%m-%e') }}').toISOString(),
endDate: new Date("{{ row.end_date|datetimeformat('%Y-%m-%e') }}").toISOString(),
function_venue: "{% for location_ids in row.event_location %}{{ location_ids.hs_id }}{% endfor %}",
max_capacity: {% if row.max_capacity %} {{ row.max_capacity }} {% else %} 0 {% endif %},
min_capacity: {% if row.min_capacity %} {{ row.min_capacity }} {% else %} 0 {% endif %},
allocation_quantity: {% if row.allocation_quantity %} {{ row.allocation_quantity }} {% else %} 0 {% endif %},
allocation_used: {% if row.allocation_used %} {{ row.allocation_used }} {% else %} 0 {% endif %},
allocation_remaining: {% if row.allocation_remaining %} {{ row.allocation_remaining }} {% else %} 0 {% endif %},
event_statusId : ({{ row.max_capacity }}>100) ? 1 : 3,
function_name : '{{ row.function_name }}',
disabled: true ,
filter_date : new Date('{{ row.start_date|datetimeformat('%Y-%m-%e') }}').toISOString().split('T')[0],
},
{% endfor %}
];
const function_venue = [
{% for row2 in hubdb_table_rows(5569414, '') %}
{
text: '{{ row2.name }}',
id: '{{ row2.hs_id }}',
color: '{{ row2.color }}',
},
{% endfor %}
];
const event_status = [
{
text: 'Available',
id: 1,
color: '#00FF00',
}, {
text: 'On Hold',
id: 2,
color: '#FFFF00',
}, {
text: 'Sold',
id: 3,
color: '#FF0000',
},
];
//Tree Data
let searchParams = new URLSearchParams(window.location.search)
if(searchParams.has('time') && searchParams.has('event')){
//let time = searchParams.get('time');
let time = new Date(searchParams.get('time'));
time = time.toISOString().substring(0, 10);
console.log(time);
let event = searchParams.get('event');
var newData = data.filter(function (el){
return el.filter_date == time;
}
);
$(() => {
// const treeListData = $.map(tasks, (task) => {
// task.Task_Assigned_Employee = null;
// $.each(employees, (_, employee) => {
// if (employee.ID === task.Task_Assigned_Employee_ID) {
// task.Task_Assigned_Employee = employee;
// }
// });
// return task;
// });
$('#tree-data').dxTreeList({
dataSource: newData,
keyExpr: 'function_venue',
// parentIdExpr: 'event_statusId',
columnAutoWidth: true,
wordWrapEnabled: true,
showBorders: true,
expandedRowKeys: [1, 2],
selectedRowKeys: [1, 29, 42],
searchPanel: {
visible: true,
width: 250,
},
headerFilter: {
visible: true,
},
selection: {
mode: 'multiple',
},
// columnChooser: {
// enabled: true,
// },
columns: [
// {
// dataField: 'Task_Subject',
// width: 300,
// }, {
// dataField: 'Task_Assigned_Employee_ID',
// caption: 'Assigned',
// allowSorting: false,
// minWidth: 200,
// cellTemplate(container, options) {
// const currentEmployee = options.data.Task_Assigned_Employee;
// if (currentEmployee) {
// container
// .append($('<div>', { class: 'img', style: `background-image:url(${currentEmployee.Picture});` }))
// .append('\n')
// .append($('<span>', { class: 'name', text: currentEmployee.Name }));
// }
// },
// lookup: {
// dataSource: function_venue,
// valueExpr: 'id',
// displayExpr: 'text',
// },
// },
{
dataField: 'function_venue',
caption: 'Event Location',
lookup: {
dataSource: function_venue,
valueExpr: 'id',
displayExpr: 'text',
},
//visible: false,
},{
dataField: 'text',
caption: 'Venue',
dataType: 'text',
}, {
dataField: 'function_name',
caption: 'Function Name',
dataType: 'text',
},
/* {
dataField: 'event_statusId',
caption: 'Status',
lookup: {
dataSource: event_status,
valueExpr: 'id',
displayExpr: 'text',
},
//visible: false,
}, {
dataField: 'startDate',
caption: 'Start Date',
dataType: 'datetime',
}, {
dataField: 'endDate',
caption: 'Due Date',
dataType: 'datetime',
},*/ {
dataField: 'max_capacity',
caption: 'Maximum Capacity',
dataType: 'text',
}, {
dataField: 'min_capacity',
caption: 'Minimum Capacity',
dataType: 'text',
}, {
dataField: 'allocation_quantity',
caption: 'Allocation Quantity',
dataType: 'text',
}, {
dataField: 'allocation_used',
caption: 'Allocation Used',
dataType: 'text',
}, {
dataField: 'allocation_remaining',
caption: 'Allocation Remaining',
dataType: 'text',
}
],
});
});
$('#tree-data, .back').show();
$('#month-data').hide();
}else{
$('#tree-data, .back').hide();
$('#month-data').show();
}
</script>
admin Asked question December 14, 2022
Write your answer.