diff --git a/src/Services/GetApis.js b/src/Services/GetApis.js
index 2242ef1..487e0f8 100644
--- a/src/Services/GetApis.js
+++ b/src/Services/GetApis.js
@@ -5,6 +5,9 @@ export default {
         return {
             courseData: [],
 
+            // dashboard.vue data properties
+            particularEvent: {},
+
 
         }
     },
@@ -51,6 +54,9 @@ export default {
             }
         },
 
+        /***************************************************************************************************************************** */
+
+        // APIS USED IN dashboard.vue
         /* studentMeetingEvents required in dashboard to display list of latest events */
         async studentMeetingEvents(params) {
             try {
@@ -65,6 +71,19 @@ export default {
 
         },
 
+        async getParticularMeetingEvent(params) {
+            try {
+                let response = await this.getMethod("/getParticularMeetingEvent", {
+                    meetingEventId: params.meetingEventId
+                })
+                this.particularEvent = response.data.data
+            } catch (error) {
+                console.log("Error in getParticularMeetingEvent - ", error.message)
+            }
+        },
+
+        /************************************************************************************************************************ */
+
 
         /* APIS USED IN announcement.vue */
         async getAnnoucementesList(params) {
diff --git a/src/pages/Dashboard/dashboard.vue b/src/pages/Dashboard/dashboard.vue
index 150fa82..040c966 100644
--- a/src/pages/Dashboard/dashboard.vue
+++ b/src/pages/Dashboard/dashboard.vue
@@ -68,6 +68,31 @@
       <v-btn flat text @click="snackbar = false">X</v-btn>
     </v-snackbar>
 
+    <!-- DIALOG BOX EVENT DETAILS -->
+    <v-dialog v-model="viewEventDetails" max-width="500">
+      <v-card flat class="card-style pa-2" dark>
+        <!-- TITLE -->
+        <v-layout>
+          <v-layout>
+            <v-flex xs12>
+              <label class="title text-xs-center">{{particularEvent.title}}</label>
+              <v-icon size="24" class="right" @click="viewEventDetails = false">cancel</v-icon>
+            </v-flex>
+          </v-layout>
+        </v-layout>
+
+        <v-card-text>
+          <v-list dark class="card-style">
+            <v-list-tile>
+              <v-list-tile-content>
+                <v-list-tile-title>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</v-list-tile-title>
+              </v-list-tile-content>
+            </v-list-tile>
+          </v-list>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
     <v-layout wrap row>
       <v-flex xs12 sm12 md9>
         <v-container fluid grid-list-xl>
@@ -384,19 +409,18 @@
             </v-flex>
             <hr />
             <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
-            <vue-event-calendar :events="activityEvents"></vue-event-calendar>
+            <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
             <!-- LATEST ACTIVITY -->
             <v-card class="my-3 elevation-0">
               <v-card-text>
-                <v-card-title
-                  class="justify-center subheading font-weight-bold"
-                  v-if="role != 'TEACHER'"
-                >Latest Activity</v-card-title>
-                <v-card-title
-                  class="justify-center subheading font-weight-bold"
-                  v-if="role == 'TEACHER'"
-                >Latest Event</v-card-title>
-                <div v-for="(activity,index) in activityList" :key="index" class="mt-2">
+                <v-card-title class="justify-center subheading font-weight-bold">Latest Activity</v-card-title>
+                <div
+                  v-for="(activity,index) in activityList"
+                  :key="index"
+                  class="mt-2"
+                  style="cursor: pointer;"
+                  @click="seeEventDetails({meetingEventId: activity.meetingEvent._id})"
+                >
                   <span
                     :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
                     style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
@@ -477,6 +501,9 @@ export default {
       // calendarData: {},
       // calendar: {},
 
+      // DIALOG BOX EVENT DETAILS
+      viewEventDetails: false,
+
       // CALENDER
       moment: moment,
       activityEvents: [],
@@ -626,38 +653,18 @@ export default {
       activityList: []
     };
   },
-  mounted() {
-    //  = this.$store.state.schoolToken;
-    // console.log("this.$store.state.role", this.token);
-    if (this.$store.state.role === "ADMIN") {
-      this.token = this.$store.state.token;
-    } else if (this.$store.state.schoolRole === "SUPERADMIN") {
-      this.token = this.$store.state.schoolToken;
-    } else if (this.$store.state.role === "TEACHER") {
-      this.token = this.$store.state.token;
-    } else if (this.$store.state.role === "ACCOUNTANT") {
-      this.token = this.$store.state.token;
-    } else if (this.$store.state.role === "LIBRARIAN") {
-      this.token = this.$store.state.token;
-    } else if (this.$store.state.role === "PARENT") {
-      this.token = this.$store.state.token;
-    }
-    this.role = this.$store.state.role;
-    // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
-    // this.getData();
-    this.getStudents();
-    this.getTeachers();
-    this.getParents();
-    this.getClasses();
-    this.getNoticeData();
-    this.getUserData();
-    this.getFeesAndCollectionsData();
-    this.getExpensesData();
-    this.getparentStudents();
-    this.getMeetingEventes();
-    // this.getUsersList();
-  },
   methods: {
+    async handleDayChanged(e) {
+      console.log("date-changed - ", e);
+      await this.getParticularMeetingEvent({
+        meetingEventId: e.events[0]._id
+      });
+      this.viewEventDetails = true;
+    },
+    async seeEventDetails(params) {
+      await this.getParticularMeetingEvent(params);
+      this.viewEventDetails = true;
+    },
     async routeToCourseDetails(courseId) {
       /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
       let response = await this.getParticularCourseDetail(courseId);
@@ -947,6 +954,38 @@ export default {
       }
     }
   },
+
+  mounted() {
+    //  = this.$store.state.schoolToken;
+    // console.log("this.$store.state.role", this.token);
+    if (this.$store.state.role === "ADMIN") {
+      this.token = this.$store.state.token;
+    } else if (this.$store.state.schoolRole === "SUPERADMIN") {
+      this.token = this.$store.state.schoolToken;
+    } else if (this.$store.state.role === "TEACHER") {
+      this.token = this.$store.state.token;
+    } else if (this.$store.state.role === "ACCOUNTANT") {
+      this.token = this.$store.state.token;
+    } else if (this.$store.state.role === "LIBRARIAN") {
+      this.token = this.$store.state.token;
+    } else if (this.$store.state.role === "PARENT") {
+      this.token = this.$store.state.token;
+    }
+    this.role = this.$store.state.role;
+    // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
+    // this.getData();
+    this.getStudents();
+    this.getTeachers();
+    this.getParents();
+    this.getClasses();
+    this.getNoticeData();
+    this.getUserData();
+    this.getFeesAndCollectionsData();
+    this.getExpensesData();
+    this.getparentStudents();
+    // this.getUsersList();
+  },
+
   async created() {
     /* get Latest events list */
     if (this.$store.state.role != "TEACHER") {
@@ -962,6 +1001,7 @@ export default {
           "YYYY/MM/DD"
         );
         obj.title = this.activityList[i].meetingEvent.title;
+        obj._id = this.activityList[i].meetingEvent._id;
         this.activityEvents.push(obj);
       }
     }