Page MenuHomePhabricator

Add a "click to see more" link to month view days with more than 15 events.
Closed, ResolvedPublic

Event Timeline

lpriestley claimed this task.
lpriestley raised the priority of this task from to Normal.
lpriestley updated the task description. (Show Details)
lpriestley added a project: Calendar.
lpriestley added a subscriber: lpriestley.

The Calendar application has several different builtin queries that provide different views of Calendar events:

  • Month view
  • Day view
  • Upcoming view

If you add more than 15 events to a particular day, then view that day in Month view, you will see that not all 15 events are shown on that day, because there is a cap of 15 maximum events. If you play around with the Month view, you will also see that by clicking in the empty space in a particular day on the calendar, you can open the Day view of that day. So basically we want a link for days with more than 15 events that makes it obvious that there are more events on that day and how to access them.

To understand where the list of events is built, you can open PhabricatorCalendarEventSearchEngine. We override a parent method, renderResultList, which is responsible for digesting any query result and displaying it for the user. In that method, we first check if we're in Month view, and if yes, delegate to buildCalendarView. There we define a "month view" object and add events to in the format that it requires. The "month view" object is PHUICalendarMonthView. Once again, there is a render method. Around line 95, we define a "list view" object, which is the list of events that every month day displays. Above it we define a $max_daily = 15;.

On line 126, we loop through every week, and then through every day to build daily lists from the daily blocks that we built on line 114. Specifically, the getEventListCell does this job. If you notice, on line 114, where we build the list to be drawn we already add properties "count" and "uri" to the array, where "count" is the number of events scheduled for that day and "uri" is the link to the Day view. Since $cell_list is being passed through to getEventListCell, we can use it there to add a "View More" link for that day. In getEventListCell, you can see that $cell_data_div is the div that contains all the information that will ever be displayed in a month day. Right before that is constructed, add a block of code that adds a phutil_tag of type a (a link) if the count is more than the maximum daily number.

You can first read about phutil_tag here. Then add it to $cell_data_div along with the other parts.

  • Note that you will be adding it, unconditionally, so make sure it's defined, regardless of whether the day has more than 15 events. Just setting it to null before checking the daily event count should be okay.
  • Also note that there are now at least two places in PhuiCalendarMonthView where we are checking against a max of 15 daily events. It would be better for future editing, if we pulled that into a private method like getMaxDailyEvents that simply returned 15, and use it instead of the inline 15's that we currently have.

After you add the phutil_tag for the "View More" link, add a class to it, phui-calendar-month-get-more. Then go to the css file specified on line 63 and add that class to the bottom of that file, with position absolute, height of 18px, padding to line up with the text of the events, and a color of {$lightgreytext}.

Right before you check it in, make sure to run bin/celerity map (because you touched css files).