1. Home
  2. Forum
  3. Vue
  4. Get First and last day of week

Get First and last day of week

i want to get the first and last day of the displayed week to get the data from API, how to handle it, and same for month i want to get all visible days

1 Reply 1 reply marked as answer
RV Ravikumar Venkatesan Syncfusion Team March 18, 2021 10:18 AM UTC

Hi Hani, 

Greetings from Syncfusion support. 

We have validated your requirement “Get First and last day of the week” at our end. We can get the current view dates with the help of the getCurrentViewDates public method of Schedule for the same, we have prepared a sample that can be available from the below link. 


[App.vue] 
<template> 
  <div> 
    <button v-on:click="onBtnClick">Get current view dates</button> 
    <ejs-schedule ref="scheduleObj" id="Schedule" :height="height" :width="width" :actionComplete="onActionComplete"> 
      <e-views> 
        <e-view option="Week"></e-view> 
        <e-view option="Month"></e-view> 
        <e-view option="TimelineMonth"></e-view> 
      </e-views> 
    </ejs-schedule> 
  </div> 
</template> 
 
<script> 
import Vue from "vue"; 
import { SchedulePlugin, Week, Month, TimelineMonth, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule"; 
 
Vue.use(SchedulePlugin); 
 
export default { 
  data() { 
    return { 
      width: "auto", 
      height: "600px", 
    }; 
  }, 
  provide: { 
    schedule: [Week, Month, TimelineMonth, Resize, DragAndDrop], 
  }, 
  methods: { 
    onBtnClick: function (args) { 
      // Printing the current view dates 
      console.log(this.$refs.scheduleObj.getCurrentViewDates()); 
    }, 
    onActionComplete: function (args) { 
      if (["dateNavigate", "viewNavigate"].indexOf(args.requestType) > -1) { 
        // Printing the current view dates once the current view dates rendered after the view or date navigation 
        console.log(this.$refs.scheduleObj.getCurrentViewDates()); 
      } 
    }, 
  }, 
}; 
</script> 

When binding the Schedule with remote data using UrlAdaptor we can get the current view start and end dates. So, we can filter the data in the server end as shown below and for the same, we have prepared a sample that can be downloaded from the below link. 

[App.vue] 
<template> 
  <div> 
    <button v-on:click="onBtnClick">Get current view dates</button> 
    <ejs-schedule ref="scheduleObj" :eventSettings='eventSettings'> 
    </ejs-schedule> 
  </div> 
</template> 
 
<script> 
import Vue from "vue"; 
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data'; 
import { SchedulePlugin, Week, Month, TimelineMonth, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule"; 
 
Vue.use(SchedulePlugin); 
 
let dataManager = new DataManager({ 
    url: 'http://localhost:54738/Home/LoadData', 
    adaptor: new UrlAdaptor(), 
    crossDomain: true 
}); 
 
export default { 
  data() { 
    return { 
      width: "auto", 
      height: "600px", 
      eventSettings: { dataSource: dataManager } 
    }; 
  }, 
}; 
</script> 

[HomeController.cs] 
    public class HomeController : Controller 
    { 
        ScheduleDataDataContext db = new ScheduleDataDataContext(); 
        public ActionResult Index() 
        { 
            return View(); 
        }   
       
        public JsonResult LoadData(Params param) 
        { 
            DateTime start = param.StartDate; 
            DateTime end = param.EndDate; 
            // Here filtering the events based on the start and end date value. 
            var data = db.ScheduleEventDatas.Where(app => (app.StartTime >= start && app.StartTime <= end)).ToList(); 
            return Json(data, JsonRequestBehavior.AllowGet); 
        } 
 
        public class Params 
        { 
            public DateTime StartDate { get; set; } 
            public DateTime EndDate { get; set; } 
        } 
   } 


Kindly try the above solutions and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan 


Marked as answer
Loader.
Up arrow icon