How to Create a Calendar on the Main Page that Shows All Events

Asil
@asil
9 years ago
41 posts

On profile pages, there is a lovely Calendar which shows all the events that profile has created, attended or plans to attend.

I would like to have a calendar on the main page that shows all events for all users. [In NING, there was a similar function and our users really like it. It makes it easy for them to find events and sign up for them.]

Is there a way to do this? I'm using site builder and there doesn't appear to be a calendar function there.

I found a closed thread [https://www.jamroom.net/the-jamroom-network/forum/suggestions/14860/calendar-for-jrevent] which appears to indicate it can be done with code, but I'm not able to make the code in that thread work.

Here's the code:

{jrEvent_calendar month=$month year=$year template="small_calendar.tpl" tpl_dir="jrEvent"}

That gets the calendar to show up, but only for the current month. I'd like to add buttons that would let the user move backward and forward by month.

Thanks!
updated by @asil: 05/06/15 09:18:53PM

@michael
9 years ago
7,746 posts

That code can go in the CODE tab of the widget.

There will be no $month or $year in that location so you will need to put in the month/year you want it for.

So you could do it like this:

{if isset($_post.month) || isset($_post.year)}
    {assign var="month" value=$_post.month}
    {assign var="year" value=$_post.year}
{else}
    {assign var="month" value=$smarty.now|jrCore_date_format:"%-m"}
    {assign var="year" value=$smarty.now|jrCore_date_format:"%Y"}
{/if}
{jrEvent_calendar month=$month year=$year template="small_calendar.tpl" tpl_dir="jrEvent"}

That would give you the current month unless there was a month variable coming in from the url.

So if the url was:
your-site.com/our_events

it would show this months one, but if you put
your-site.com/our_events/month=02/year=2014

it would show the events for feb, 2014

Asil
@asil
9 years ago
41 posts

@michael. Thanks for the quick response.

When I paste the expanded code you supplied into the CODE tab of the widget on the home page, the resulting calendar is the same. In other words, all that appears is the calendar for the current month. There is no title showing what month it is, and there are no icons that allow the user to move between months.

Are you advising the code you supplied should be put somewhere other than the CODE tab of the widget?

@michael
9 years ago
7,746 posts

The code section of the widget is not where my mind jumps to when I think about code. Its a new thing to me, but yes that would be ok.

No, there are no controls, you'd have to setup some controls if you wanted the user to have the ability to change months.

The control would include changing the URL to include the desired month/year so that it could be picked up by the calendar.

when you have a url like this:
site.com/somewhere/animal=elephant/color=blue/weather=rain

what will happen is jamroom will look in the skin for a file called somewhere.tpl and display that. If that is not there but the Site Builder system is turned on and it has a page for 'somewhere', then that will be displayed.

Inside either of those locations the rest of the values from the url will be available to use.

So:
{$_post.animal} in your template code will display "elephant" to the screen.
{$_post.color} in your template code will display "blue" to the screen.
{$_post.weather} in your template code will display "rain" to the screen.

Its this system that you would utilize to get the wanted date to show.

In your case you want to use /month=???/year=???? so the calendar can use them.

The easiest way to build some navigation is just to add a couple of links for next month and prev month:

<a href="{$jamroom_url}/somewhere/month=">next month</a>
<a href="{$jamroom_url}/somewhere/month=">next month</a>

Just need to figure out the correct month. Check out the smarty docs on how to format that:

"Smarty.Now formatting page"
http://www.smarty.net/docsv2/en/language.modifier.date.format

(no sense in making it completely copy+paste eh

)

There is this selector system in one of the templates too:

       <select class="form_select" style="width: auto" name="calendar_month" id="calendar_month" onchange="var m=this.options[this.selectedIndex].value; jrCore_window_location('{$jamroom_url}/concerts/month='+ m +'/year={$year}')">

            <option value="1" {if $month == "1"}selected="selected"{/if}>{jrCore_lang module="jrEvent" id="41" default="January"}</option>
            <option value="2" {if $month == "2"}selected="selected"{/if}>{jrCore_lang module="jrEvent" id="42" default="February"}</option>
            <option value="3" {if $month == "3"}selected="selected"{/if}>{jrCore_lang module="jrEvent" id="43" default="March"}</option>
            <option value="4" {if $month == "4"}selected="selected"{/if}>{jrCore_lang module="jrEvent" id="44" default="April"}</option>
            <option value="5" {if $month == "5"}selected="selected"{/if}>{jrCore_lang module="jrEvent" id="45" default="May"}</option>
            <option value="6" {if $month == "6"}selected="selected"{/if}>{jrCore_lang module="jrEvent" id="46" default="June"}</option>
            <option value="7" {if $month == "7"}selected="selected"{/if}>{jrCore_lang module="jrEvent" id="47" default="July"}</option>
            <option value="8" {if $month == "8"}selected="selected"{/if}>{jrCore_lang module="jrEvent" id="48" default="August"}</option>
            <option value="9" {if $month == "9"}selected="selected"{/if}>{jrCore_lang module="jrEvent" id="49" default="September"}</option>
            <option value="10" {if $month == "10"}selected="selected"{/if}>{jrCore_lang module="jrEvent" id="50" default="October"}</option>
            <option value="11" {if $month == "11"}selected="selected"{/if}>{jrCore_lang module="jrEvent" id="51" default="November"}</option>
            <option value="12" {if $month == "12"}selected="selected"{/if}>{jrCore_lang module="jrEvent" id="52" default="December"}</option>
        </select>

Asil
@asil
9 years ago
41 posts

michael:(no sense in making it completely copy+paste eh

I appreciate your levity. Sadly, as a person with dyslexia, PHP is a challenge for me. And, as person with very limited time, cut/paste is really appreciated and very much desired. :-)

I have tried to make something from the code provided, but I am really struggling. When I combine the code and put it into the CODE box of the widget, I get a drop-down for each month that, when triggered, takes me to a blank page. In other words, it doesn't effect the embedded calendar.

How do I link these functions?
updated by @asil: 04/04/15 02:32:06PM

@michael
9 years ago
7,746 posts

90% of it is done. The link format is:

<a href="{$jamroom_url}/somewhere/month={$smarty.now|jrCore_date_format:"%-m"}/year={$smarty.now|jrCore_date_format:"%Y"}">

You might need to hire a developer to link that all up for you. There is only so far forum support can get you; about up to the point of understanding the concepts, after that its just implementation.

--edit--
The steps to implementation are:
* decide on a location for it
* make sure your can effect that location (by typing HELLO WORLD or something to see if that comes out)
* then put the code in and get it structured visually correctly
* test it to see if it works.
* If it doesn't work, change something and test again.
updated by @michael: 04/06/15 01:02:35AM