I've been wanting to be able to do this for a long time; theme the month and date on an event listing and give them separate divs to control their appearance.
Out of the box, the Date module gives the following:
<span class="date-display-single">July 28</span>
Notice that the class "date-display-single" give the entire date: July 28. I have been wanting to be able to separate the month and date into their own separate divs in order to style them to a specific style with larger font sizes and choices for the date and a bit smaller for the month as well as have them sit on separate lines. See attached image for example.
Here is how I solved this problem.
- Create a View of the upcoming events, have it use row style and HTML list and include the node title and the date field for your content type.
- Include the filters for Published: Yes and Node type: Event
- Sort Criteria: Your content date field: descending
This is a very basic View and could have several other fields or options, but we are needing it to be a very basic list that displays the date and the title.
Next, I used the theme link in the view to get the template name that I would need. You will need to use the Row style output for this scenario. Create a new blank file in your theme folder and name it with the new template name. Then use the Rescan template button on the Views theme information page after you've created the file and it will then begin to use that file.
I am using the template name: "views-view-fields--events--block.tpl.php"
Here is the code I am using in the template:
<?php
// Since the cck date field is not in UNIX timestamp format, convert first
$timestamp = strtotime($fields['field_event_time_value']->raw);
$ev_month = format_date($timestamp, 'custom', 'F');
$ev_day = format_date($timestamp, 'custom', 'd');
?>
<div class="upcoming-date">
<span class="month"><?php print "$ev_month"; ?></span>
<span class="day"><?php print "$ev_day"; ?></span>
</div>
<div class="workshop-title">
<span class="title"><?php print $fields['title']->content ?> </span>
</div>In the line for $timestamp, notice it references the "field_event_time_value"
To get the field name for you event date, go to your content type and look at your date field's name. It will be something like mine: field_event_time. You will need to add "_value" on to the end of your field name.
Comments
Wrong date
Hello,
I tried to use your code. It's exactly what I was looking for to theme the day and the months in two different ways.
But there's a big problem here : The date displayed is wrong. In my example, the date should be Februar 17 but the code displays Februar 16.
Do you know what could be the problem ? Timezone ?
Thank you very much :)
EDIT // My mistake... the cck date field had an active option to convert the timezone... Problem solved. Thank you very much for the code.
Yea, those timezone things
Yea, those timezone things can really get ya. Glad the code is helping.
Dan
Content Type Only?
Great write-up Dan.
How would I do this for a content type only?
I made a "Blog Post" content type and I just rely on the "promote to front page" checkbox so I don't need to create a view for it.
The blog post content type behaves similarly to the article content type.
Probably have to override the content type template
Thanks man. Sorry I couldn't be at the last meetup.
I imagine that you are going to need to override the template of the content type that you created. But, the solution that I describe above is based on using views and the ability to call the fields that you want to display and then overriding that in a views template.
I would assume that you could use a template for the content type node and figure out a way to break up the date in a way similar to what I've shown above. It's gonna take some experimentation.
No value for fieldName_value
Do you know why this would return empty for me?
$fields['field_event_time_value']->raw);
Where as without the _value it returns a value (its the wrong one of course).
Also where can I find out more about when and why to use the _value etc for feilds.
Thanks, this is just what I wanted... I'm just haveing issues.
-- I am using 7
I'm actually not sure why
I'm actually not sure why that would happen either, but it may have to do with the fact that you are on Drupal 7. I have barely begun using Drupal 7 and I definitely haven't started using custom templates and calling fields. I'm assuming that since fields are in core, they are probably being handled differently than in Drupal 6, but I do not have any knowledge of that at this point.
Sorry, I really wish I could help you more.
Dan
Drupal 7
Source: http://drupal.stackexchange.com/questions/4908/how-do-i-add-extra-classe...
knalstaaf, I love you for
knalstaaf,
I love you for this. Thank you!
The token, though, is different in the version I'm using, which I believe is the latest D7 - with my custom field (that's named "release_date") it's
[node:field-release-date:custom:F]. Note there's no "source" in the token.Works like a charm... brilliant!
Other solution (D7)
Hi, I've just faced the same problem and discussing with a friend, he came up with another solution:
He created a new View News with 2 fields "Content: Post date" and in the first (date format d) he set it to "Exclude from display". The second "Content: Post date" (date format M) he checked the "Rewrite the output of this field " and set it as:
<p><span class="day">[created]</span>[created_1]</p>So [created] was the first "Content: Post date" (that was set not to display) and [created_1] was the second "Content: Post date". So with a bit of CSS we could add that nice "calendar image" and set up the other fields Content: Title, Content: Body and Content: Link.
I believe that for an Event View you would just have to create 2 new content fields to hold the right dates, instead of the Post date...
Forget about it...
Guys, forget about my previous post... actually, I didn't read that you were using the Date module (noobie mistake) and the solution I explained doesn't work for this case :-(
Sorry about that