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:
3 Likes
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
2 Likes
Really love that quotes, it means that we are always learning.
Best Regards,
Vina P.
give your best in every challenges.
1 Like
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>
<div class="modal" ...>
<h1>Create an Event</h1>
<form>
<h2>Title</h2>
<input type="text" value="{{selectedEventTitle}}" />
<!-- And so on with the rest of your form -->
</form>
</div>
</template>
In your template.js:
Template.calendarTemplate.helpers({
eventTitle: function() {
Template.instance().selectedEventTitle.get();
},
// All your other helpers...
});
Template.calendarTemplate.events({
'click #someParentCalendarElement': function(event, template) {
template.selectedEventTitle.set($(event.currentTarget).find("#eventTitle"));
// 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
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) {
//event.preventDefault();
// Get the start date/time and format it to ISO 8601
const f = document.getElementById(event.target.start.id);
// Get the end date/time and format it to ISO 8601
const g = document.getElementById(event.target.end.id);
// Store the start and end time as integers.
const startValue = parseInt(event.target.start.value);
const endValue = parseInt(event.target.end.value);
// 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 = event.target.title.value;
let start = `${newEvent.date}T${f.options[f.selectedIndex].value}-10:00`;
if (f.options[f.selectedIndex].value === 'Select a Start Time') {
start = '';
}
let end = `${newEvent.date}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")
return
}
I have found that EventData.find did not execute the next code ( i didn’t know where it ran then ).
Do you have any suggestion?
Thank you very much.