A few easy changes¶

It is time to customize Joyous to suit your needs. This tutorial will show some easy changes to make.

I will assume you already have Joyous installed and a calendar added. (See the first tutorial for details on that.)
Create an application to hold the customisations we are going to make. (If you already have one, then you can use that and skip this step.)
```
$ ./manage.py startapp myevents
```
Add this application to your INSTALLED_APPS setting in mysite/mysite/settings/base.py
```
INSTALLED_APPS = [
    ...
    'myevents',
    ...
]
```

Settings¶

To start with let’s add some settings. These can go in mysite/mysite/settings/base.py.
```
JOYOUS_THEME_CSS = "/static/joyous/css/joyous_forest_theme.css"
JOYOUS_HOLIDAYS = "Scotland"
JOYOUS_DATE_FORMAT = "l jS \\o\\f F X"
JOYOUS_DATE_SHORT_FORMAT = "j M X"
JOYOUS_TIME_FORMAT = "fq"
JOYOUS_TIME_INPUT = "12"
```
1. JOYOUS_THEME_CSS includes a theme CSS file into each Joyous page. You could do the same thing by overriding the Joyous templates (which we will look at later), but this is easier. We’ve chosen the forest theme file for a green palette.
2. JOYOUS_HOLIDAYS adds holiday names onto our calendar. We’ve chosen the holidays of "Scotland". For the holidays of a state, province or region add it in square brackets after the country name, e.g. "Canada[NS]". Multiple countries and regions can be listed separated by commas or by using * as a wildcard. See python-holidays for all the countries and regions that are supported.
3. JOYOUS_DATE_FORMAT for dates like “Monday 11th of March”.
4. JOYOUS_DATE_SHORT_FORMAT for short dates like “11 Mar”.
5. JOYOUS_TIME_FORMAT for times like “9am”.
6. JOYOUS_TIME_INPUT allows the editor to enter times in the 12 hour format, e.g. 9am.
The following Django settings are also important. Make sure they are set to values that are correct for you.
```
USE_TZ = True
TIME_ZONE = "Europe/London"
USE_I18N = True
USE_L10N = True
LANGUAGE_CODE = 'en-uk'
```
1. Joyous uses timezone-aware datetimes, so USE_TZ must be set to True. If it is not you will get an error like localtime() cannot be applied to a naive datetime when trying to view a calendar.
2. TIME_ZONE sets the default timezone that Django uses. Wagtail also allows an editor to change their time zone for the Wagtail admin interface using the Account Settings | Current time zone panel.
3. USE_I18N turns on the Django translation system. If you only ever want to display English you could set it to False, but you might as well set it to True in case you ever want to display your website in another language.
4. USE_L10N enables Django’s localized formatting of numbers and dates. JOYOUS_DATE_FORMAT, JOYOUS_DATE_SHORT_FORMAT, JOYOUS_TIME_FORMAT, and JOYOUS_FIRST_DAY_OF_WEEK override Django’s formatting, but if they were not set then Joyous dates and times would be formatted according to the current locale. See your django/conf/locale directory to find these format files. If you want, you can create your own custom format.
5. LANGUAGE_CODE sets the default locale that Django will use.
Start your server
```
$ ./manage.py runserver
```
And, have a look at your calendar and events.

Templates¶

Now, say you don’t want to display the download links, and want bigger images on your event pages. You can do this by overriding the Joyous templates. And, you can use template inheritance to override just the particular blocks you want to change. E.g. just override the footer.

Create a templates/joyous directory in your app.

Add the following files to your this directory. This will replace the download links in the footers of the calendars and events.

calendar_base.html

{% extends "joyous/calendar_base.html" %}
{% block cal_footer %}{% endblock cal_footer %}

calendar_list_upcoming.html

{% extends "joyous/calendar_list_upcoming.html" %}
{% block cal_footer %}{% endblock cal_footer %}

event_base.html

{% extends "joyous/event_base.html" %}
{% block event_footer %}{% endblock event_footer %}

Edit event_base.html and override the event_image block for a larger image. (Don’t forget that you need to load wagtailimages_tags to use the image tag.)

event_base.html

{% extends "joyous/event_base.html" %}
{% load wagtailimages_tags %}

{% block event_footer %}{% endblock event_footer %}

{% block event_image %}
  {% if page.image %}
  <div class="joy-img">
    {% image page.image width-500 class="joy-img__img" %}
  </div>
  {% endif %}
{% endblock event_image %}

Also postponement_page_from.html has its own definition of event_image (because it displays the image of the original event not the postponement) so, for completeness, add an override for that too.

postponement_page_from.html

{% extends "joyous/postponement_page_from.html" %}
{% load wagtailimages_tags %}

{% block event_image %}
  {% if overrides.image %}
  <div class="joy-img">
    {% image overrides.image width-500 class="joy-img__img" %}
  </div>
  {% endif %}
{% endblock event_image %}

Have another look at your calendar and events. Notice how the export links are gone and the images are larger.

I hope that this tutorial was useful.