Date and Time Display Settings

  1. Having the day of the week and military time may be fine, but we can control that as well.  In order to do that we can click on the gear icon for our Date field in the Manage Display tab in our field collection.

    Date settings - click gear icon

  2. Now under Format, you can Choose how users view dates and times.  However, we have limited options.

    Date and Time values

  3. If none of those options float your boat, click on the Date and time settings link below the drop down.  This will take you to the Date and Time page (also found Configuration -> Regional and language -> Date and time).  By default we have the Long, Medium, and Short options.  To create a new one click on + Add date type link and then name your new date type and select the format you want from the drop down menu and click Add date type.

    Select date format

  4. Now back to your date field in your field collection, click on the gear to update the settings for your date field.  Under Choose how users view dates and times you will now see the new date type we just created.  Go ahead and select that and click Save.

    Select new date type format

  5. Let's check it out! Create a new page using our new Visiting Lecturers content type.

    Looks Good!

  6. Looks good with one Date and Location.  What will it look like with two?  Let's add another one and see.

    What it looks like with two dates and locations

    Not too bad, but we want them to be side by side.

  7. To get that, we will have to add some CSS to not only get the look we want, but to overwrite the default styles for the field collection.  The purpose of this tutorial is not to show you how to create CSS.  I would recommend checking out w3cschools excellent CSS tutorial and get familiar with either Google Chrome DevTools or Firefox's Firebug.  After adding the following CSS to Configuration -> KU settings -> Custom CSS & Javascript in the Additional/custom css field.

    .field-name-field-dates-locations .field-items .even,
    .field-name-field-dates-locations .field-items .odd { width: 50%; float: left; display: inline; }

    .field-name-field-date-lecturer .field-items .even,
    .field-name-field-date-lecturer .field-items .odd,
    .field-name-field-location-lecturer .field-items .even,
    .field-name-field-location-lecturer .field-items .odd { width: 100% !important; }

    .field-collection-container { border: none; }
    .field-collection-view { padding: 0; margin: 0; border: none; }

    It should now look like this.

    What it looks like with two dates and locations fully styled

  8. Just a note regarding field collections.  When you Add another item to your field collection, you will notice extra KU Page Settings tabs at the bottom of your content type.  There will be one for the Visiting Lecturers content type and one for each Date & Location field collection.  This is normal and will not affect how your content type will function.

    Multiple KU Page Settings tabs

  9. Bonus: Next we will take a look at the URL alias patterns and customize that as well!

Next: Create Custom URL Alias Pattern for your content type »


Training Calendar
CMS Help

If you are experiencing a critical issue with your live website, please contact the IT Customer Service Center at 864-8080 or itcsc@ku.edu.

For questions on CMS policy, look & feel, and all other issues, please visit our help page.

Please contact web services at 864-6415 or webservices@ku.edu for help with your site

Online help can be found under the How-To's section of this website.