0

<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
Add a Comment