Link to URl when event is clicked

[kylestetz]

Link to URl when event is clicked

[kylestetz]

Try console.log(target) in your click handler and check out the developer console. My use of the word target here is a bit misleading... This is the object you get back when the click event is fired:

target: {
  element: DOMElement,
  date: moment(),
  events: []
}

So you'd want to point your window.location.href to something like target.events[0].url, however there's no guarantee that the day a user clicks on even has events in it.

As a suggestion, you might want to try adding a URL to the event in the template instead. Then you don't even need click events. While looping through the days array you might throw something like this in your template:

<% if(days[i].events.length) { %>
  <% _.each(days[i].events, function(event) { %>
    <a href="<%= event.url %>"><%= event.title %></a>
  <% }) %>
<% } %>

Let me know if that's confusing.

[DaAwesomeP]

@kylestetz, I understand. It works now! Thanks!

[DaAwesomeP]

Well, I just realized I should use the alternative solution as you said. I can't get it to work
Here is my template:

<div id="full-clndr" class="clearfix">
                      <script type="text/template" id="full-clndr-template">
                         <div class="controls">
                            <div class="clndr-previous-button">&lsaquo;</div><div class="month"><%= month %> <%= year %></div><div class="clndr-next-button">&rsaquo;</div>
                        </div>
                        <div class="clndr-grid">
                          <div class="days-of-the-week clearfix">
                            <% _.each(daysOfTheWeek, function(day) { %>
                              <div class="header-day"><%= day %></div>
                            <% }); %>
                          </div>
                          <div class="days clearfix">
                            <% _.each(days, function(day) { %>
                              <div class="<%= day.classes %>" id="<%= day.id %>"><span class="day-number"><%= day.day %></span></div>
                            <% }); %>
                          </div>
                        </div>
                        <div class="event-listing">
                          <div class="event-listing-title">EVENTS THIS MONTH</div>
                          <% _.each(eventsThisMonth, function(event) { %>
                              <a href="<%= event.url %>"><div class="event-item">
                                <div class="event-item-name"><%= event.title %></div>
                                <div class="event-item-location"><%= event.location %></div>
                              </div></a>
                            <% }); %>
                        </div>
                      </script>
                    </div>

[kylestetz]

That template is working fine for me with the events array you posted earlier. What is the problem exactly?

[DaAwesomeP]

Where do I insert the code?

<% if(days[i].events.length) { %>
  <% _.each(days[i].events, function(event) { %>
    <a href="<%= event.url %>"><%= event.title %></a>
  <% }) %>
<% } %>

[kylestetz]

Oh! Sorry, I misunderstood. There are two ways you can do this depending on how you want it to function.

1: The entire day on the calendar is one big link. This poses a problem if you plan to have more than one event on the same day (wouldn't recommend going down this road).

2: Each event is listed inside of the day in which it takes place. That's the code example I was giving you, which would go here (I took out the if statement because it was redundant):

<div id="full-clndr" class="clearfix">
  <script type="text/template" id="full-clndr-template">
     <div class="controls">
        <div class="clndr-previous-button">&lsaquo;</div><div class="month"><%= month %> <%= year %></div><div class="clndr-next-button">&rsaquo;</div>
    </div>
    <div class="clndr-grid">
      <div class="days-of-the-week clearfix">
        <% _.each(daysOfTheWeek, function(day) { %>
          <div class="header-day"><%= day %></div>
        <% }); %>
      </div>
      <div class="days clearfix">
        <% _.each(days, function(day) { %>
          <div class="<%= day.classes %>" id="<%= day.id %>">
            <span class="day-number"><%= day.day %></span>

            <!-- perhaps here is a good place? -->

            <% _.each(day.events, function(event) { %>
              <a href="<%= event.url %>"><%= event.title %></a>
            <% }) %>

          </div>
        <% }); %>
      </div>
    </div>
    <div class="event-listing">
      <div class="event-listing-title">EVENTS THIS MONTH</div>
      <% _.each(eventsThisMonth, function(event) { %>
          <a href="<%= event.url %>"><div class="event-item">
            <div class="event-item-name"><%= event.title %></div>
            <div class="event-item-location"><%= event.location %></div>
          </div></a>
        <% }); %>
    </div>
  </script>
</div>

[DaAwesomeP]

I'm just going to stick with the first option so that I can have the event link fill the entire day.