How to transfer value from js to modal


I have some value of activities which listed here

and i need to pass all of that value to a modal , so it will return title,start time, end time for authorized user as a pic. For example on 23rd July, the value should return “meeting apa saja”, “12:00 am”,“01:00 am” respectively.

Does anyone know how to make it happen?

Would you be here for a tiny help @serkandurusoy?

Thank you for your help in advance.


Depends on the UI layer you are using (blaze/react/vue/angular/…) but the idea would be to:

  • catch the click event on the calendar entry
  • store the data related to the clicked entry somewhere that the modal can read from
  • show the modal with the data

This is generally referred to as “global state” or a “local state” which is scoped to some parent component that encloses both the modal and the calendar.

With stock meteor, you might want to read up on:


Thank you @serkandurusoy, i will take a look and read your references, please don’t get annoyed with me, i am newbie in meteor.


We’ve all been a Meteor newby at some point and will all be a newby for something else sooner or later :slight_smile:


Really love that quotes, it means that we are always learning.

Best Regards,

Vina P.
give your best in every challenges.


Like @serkandurusoy is saying, we do something like this in our app :

In your template.html:

<template name="calendarTemplate">
   <div id="calendar">
      <!-- Your calendar HTML and code -->

   <div class="modal" ...>
      <h1>Create an Event</h1>
         <input type="text" value="{{selectedEventTitle}}" />
         <!-- And so on with the rest of your form -->

In your template.js:

   eventTitle: function() {    
   //  All your other helpers...
   'click #someParentCalendarElement': function(event, template) {
      //  Set all the other from values...

Template.calendarTemplate.onCreated(function() {
   this.selectedEventTitle = new reactiveVar();
   //  You could have one var for each form value or an object to hold all formvalues, etc.

Something like this will work. You could also just do a pure JS/JQuery solution and just set the values on the modal upon a click using JQuery instead of using Meteor reactivity. It depends on your use case.


Hi @evolross, thank you for your help.

I have found the solution in the same day with your post. It made me happy :smiley:

here are the results :



But now i am facing another problem ( please take a look at the first picture), i cannot put validation for both events (titled :‘meeting’ and ‘adf’), since they are conducted on August 4th and run at the same time, 00.00 AM - 01.00 AM.

I have tried to do validation like these (see preformatted text)

‘submit .session-data-form’(event, instance) {

 // Get the start date/time and format it to ISO 8601
 const f = document.getElementById(;

 // Get the end date/time and format it to ISO 8601
 const g = document.getElementById(;

  // Store the start and end time as integers.
const startValue = parseInt(;
const endValue = parseInt(;

// Store the start and end time in a string format.
const startString = f.options[f.selectedIndex].text;
const endString = g.options[g.selectedIndex].text;

const pic  = FlowRouter.getParam('name');

if ( $('button.ui.teal.button').text()=="Create Event")

  let newEvent = Session.get('eventModal');

// Get the title of the event.
const title =;

let start = `${}T${f.options[f.selectedIndex].value}-10:00`;
if (f.options[f.selectedIndex].value === 'Select a Start Time') {
  start = '';

let end = `${}T${g.options[g.selectedIndex].value}-10:00`;
if (g.options[g.selectedIndex].value === 'Select an End Time') {
  end = '';

   //check if startValue or endValue in the same date already exists

   let startCount = EventData.findOne({startValue:startValue,start:start}).count();
    let endCount = EventData.findOne({endValue:endValue,end:end}).count();
    if (startCount>0||endCount>0)
      alert("Please check start and end time,it shall not be reserved by others")

I have found that EventData.find did not execute the next code ( i didn’t know where it ran then :blush:).

Do you have any suggestion?

Thank you very much.